JS實現(xiàn)獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】

更新時間：2017年04月24日 14:18:19 作者：shenzhenNBA

這篇文章主要介紹了JS實現(xiàn)獲取圖片大小和預覽的方法,結合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預覽等操作的相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)獲取圖片大小和預覽的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS獲取圖片大小和預覽【兼容IE和其它瀏覽器】</title>
</head>
<script type="application/javascript">
function previewImage(oImage,preViewId){
  if(!oImage.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
    //alert('圖片格式無效！');
    return;
  }
  var imgPath = "";
  if(document.all){
    //低版本IE瀏覽器
    oImage.select();
    imgPath = document.selection.createRange().text;
    //使用濾鏡效果
    var tempValue = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
    tempValue += "enabled='true',sizingMethod='scale',src=\"" + imgPath + "\")";
    document.getElementById(preViewId).style.filter = tempValue;
  }else{
    //非IE瀏覽器，如火狐google等瀏覽器
    imgPath = window.URL.createObjectURL(oImage.files[0]); //FF7.0以上
    document.getElementById(preViewId).src = imgPath; //顯示預覽圖
  }
};
function getFileSize(objFile){
  var fileSize = objFile.fileSize || 0;
  if(fileSize == 0) {
    fileSize = objFile.files[0].size;
  }
  return fileSize;
}
function imageChange(){
  var oImg = document.getElementById("imageFile01");
  previewImage(oImg,"preview");
  var fileSize = getFileSize(oImg);
  fileSize = Math.ceil(fileSize / 1024) + "KB";
  var filePath =oImg.value;
  var agent = window.navigator.userAgent;
  var tempValue = "<br>File size: " + fileSize;
  tempValue += "<br>File path: " + filePath;
  tempValue += "<br>agent=" + agent;
  document.getElementById("imageInfo").innerHTML = tempValue;
};
</script>
<body>
<h3>JS獲取圖片大小和預覽【兼容IE和其它瀏覽器】</h3>
<img id="preview" style="width: 100px; height: 60px; border: 0px;" />
<br>
<input name="imageFile01" id="imageFile01" type="file" onchange="javascript:imageChange();" />
<br>
<div id="imageInfo"></div>
</body>
</html>

運行效果圖如下：

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

typescript配置alias的詳細步驟
這篇文章主要介紹了typescript配置alias，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
常用的js驗證和數(shù)據(jù)處理總結
遇到需要對數(shù)據(jù)及表單驗證的，我相信大家都像我一樣，喜歡在網(wǎng)上找相關的方法，因為自己寫的話，是比較耗時的。今天就給大家分享一下，自己在工作中總結的一些常用的js。
2016-08-08
利用NodeJS和PhantomJS抓取網(wǎng)站頁面信息以及網(wǎng)站截圖
這篇文章主要介紹了利用NodeJS和PhantomJS抓取網(wǎng)站頁面信息以及網(wǎng)站截圖的方法，提供實例代碼供大家參考
2013-11-11
safari,opera嵌入iframe頁面cookie讀取問題解決方法
最近做的合作網(wǎng)站嵌入到對方的iframe中去，在safari,opera和有些版本的搜狗瀏覽器（內(nèi)核版本原因）中不能讀到cookie。
2010-06-06
JavaScript中創(chuàng)建類/對象的幾種方法總結
這篇文章主要是對JavaScript中創(chuàng)建類/對象的幾種方法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
Moment.js實現(xiàn)多個同時倒計時
這篇文章主要為大家詳細介紹了Moment.js實現(xiàn)多個同時倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-08-08
javascript 極速隱藏/顯示萬行表格列只需 60毫秒
隱藏表格列這種方式的效率極低。例如，隱藏一個千行表格的某列，在我的筆記本（P4 M 1.4G，768M內(nèi)存）上執(zhí)行需要約 4000毫秒的時間，令人無法忍受。
2009-03-03
js獲得相對路徑文件并上傳到服務器的方法
由于瀏覽器的安全限制,Javascript無法直接獲取用戶上傳文件的絕對路徑。但是我們可以通過一些技巧來獲取文件的相對路徑,這篇文章主要給大家介紹了關于js獲得相對路徑文件并上傳到服務器的相關資料,需要的朋友可以參考下
2023-11-11
xmlplus組件設計系列之列表（4）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
Avalonjs 實現(xiàn)簡單購物車功能(實例代碼)
avalon是國內(nèi)最強大的MVVM框架，最近小編在高購物車的項目，我們是用avalon來實現(xiàn)一些模塊的，所以順其自然的用avalon來實現(xiàn)購物車。接下來通過本文給大家分享Avalonjs 實現(xiàn)簡單購物車功能的實例代碼，需要的的朋友參考下
2017-02-02