快捷導(dǎo)航

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

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

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

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

<!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獲取圖片大小和預(yù)覽【兼容IE和其它瀏覽器】</title>
</head>
<script type="application/javascript">
function previewImage(oImage,preViewId){
  if(!oImage.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
    //alert('圖片格式無(wú)效！');
    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; //顯示預(yù)覽圖
  }
};
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獲取圖片大小和預(yù)覽【兼容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>

運(yùn)行效果圖如下：

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

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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