JS上傳圖片且在線預覽，修改瀏覽器兼容性問題

原創 耶律小稣 2018-08-23 12:37
[html] view plain copy
  1. <span style="font-size:14px;">    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.     <html xmlns="http://www.w3.org/1999/xhtml" >  
  3.     <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>本地圖片預覽</title>  
  6.     <style type="text/css">  
  7.     #preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;}  
  8.     #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
  9.     </style>  
  10.     <script type="text/javascript">  
  11.     function previewImage(file)  
  12.     {  
  13.           
  14.   
  15.       var MAXWIDTH  = 300;  
  16.       var MAXHEIGHT = 300;  
  17.       var div = document.getElementById('preview');  
  18.       if (file.files && file.files[0])  
  19.       {  
  20.         div.innerHTML = '<img id=imghead>';  
  21.         var img = document.getElementById('imghead');  
  22.         img.onload = function(){  
  23.           var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
  24.           img.width = rect.width;  
  25.           img.height = rect.height;  
  26.           img.style.marginLeft = rect.left+'px';  
  27.           img.style.marginTop = rect.top+'px';  
  28.         }  
  29.       
  30.         var reader = new FileReader();  
  31.         reader.onload = function(evt){  
  32.                  var type = evt.target.result.substr(0,10);  
  33.                  if(type!='data:image'){  
  34.                     alert("請選擇圖片上傳");  
  35.                     return ;  
  36.                  }  
  37.                 img.src = evt.target.result;  
  38.                 }  
  39.         reader.readAsDataURL(file.files[0]);  
  40.       }  
  41.       else  
  42.       {  
  43.         var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';  
  44.         file.select();  
  45.         var src = document.selection.createRange().text;  
  46.         var type =src.substr(src.lastIndexOf(".")+1);   
  47.          type = type.toLowerCase();  
  48.             
  49.           var reg = new RegExp("^(png|jpg|bmp|gif|jpeg)$");    
  50.         if(!reg.test(type)){   
  51.             alert("請選擇圖片上傳");  
  52.             return ;  
  53.         }  
  54.            
  55.         div.innerHTML = '<img id=imghead>';  
  56.         var img = document.getElementById('imghead');  
  57.         img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;  
  58.         var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
  59.         status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);  
  60.         div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";  
  61.       }  
  62.     }  
  63.     function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
  64.         var param = {top:0, left:0, width:width, height:height};  
  65.         if( width>maxWidth || height>maxHeight )  
  66.         {  
  67.             rateWidth = width / maxWidth;  
  68.             rateHeight = height / maxHeight;  
  69.             if( rateWidth > rateHeight )  
  70.             {  
  71.                 param.width =  maxWidth;  
  72.                 param.height = Math.round(height / rateWidth);  
  73.             }else  
  74.             {  
  75.                 param.width = Math.round(width / rateHeight);  
  76.                 param.height = maxHeight;  
  77.             }  
  78.         }  
  79.         param.left = Math.round((maxWidth - param.width) / 2);  
  80.         param.top = Math.round((maxHeight - param.height) / 2);  
  81.         return param;  
  82.     }  
  83.     </script>  
  84.     </head>  
  85.     <body>  
  86.     <div id="preview">  
  87.         <img id="imghead" width="300" height="300" border="0" src='../images/demo.jpg'><!--無預覽時的默認圖像，自己弄一個-->  
  88.     </div>  
  89.         <br/>  
  90.         <input type="file" onchange="previewImage(this)" />  
  91.     </body>  
  92.     </html>  
  93.   
  94.      </span>  
轉載：http://www.codefans.net/articles/1395.shtml
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

spa頁面，不同組件按需引入js，aliplayer

(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur

HainesFreeman 2020-07-08 12:39:19

js 函數重載

概念：允許某個函數有各種不同輸入，根據不同的輸入，調用不同的函數，然後返回不同的結果。 簡單定義：根據不同參數長度來實現讓同一個函數，進行不同處理 function addMethod (obj, name, fun) { le

HainesFreeman 2020-07-08 12:39:19

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

函數的內部屬性————Arguments對象

一、基本點 arguments是一個類數組對象，包含着傳入函數中的所有參數。主要用途是保存函數參數，但這個對象還有一個名叫callee的屬性 arguments的 callee屬性是一個指針，指向擁有這個arguments對象的

ddx2019 2020-07-08 11:55:42

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

知道這 20 個正則表達式，能讓你少寫 1,000 行代碼

http://www.runoob.com/regexp/regexp-syntax.html 正則表達式，一個十分古老而又強大的文本處理工具，僅僅用一段非常簡短的表達式語句，便能夠快速實現一個非常複雜的業務邏輯。熟練地掌握正則表

哈哈金馆长 2020-07-08 11:36:23

a標籤中使用onclick提示function未定義

<a href="javascript:;" onclick="text()">leave a message</a> 今天做東西的時候，發現在a標籤中使用onclick觸發函數，一直報錯，顯示function未定義，開始還以爲

Ro0k1e 2020-07-08 11:27:27

JS_目錄

DOM(Document Object Model)文檔對象模型，以及文檔的加載 事件、事件句柄 DOM查詢----獲取模型樹中的節點document中的方法，以及節點中的屬性 獲取/修改元素節點的屬性 獲取/修改元素節點的內

丨QAQ丨凸 2020-07-08 11:21:00

js給value動態賦值

//動態改變少數民族的值 function checkSelect(){ var ontion = document.getElementById("nations").value; //alert("少數民族的值爲："+ont

Old丶Seven 2020-07-08 11:20:47

Promise基本使用（慕課Promise教程筆記）

很久沒寫博客了......看了很多關於Promise的文章，但是感覺也不是很理解，沒辦法去就看視頻了。偶然發現慕課裏有個關於Promise的視頻，然後今天看了前兩章，順便整理了下筆記，記錄下吧~ Promise 是什麼？ 用於異步計算。

冰派甜心 2020-07-08 11:05:39

toString()、String(obj)和valueOf()

toString() 每個字符串都有一個toString()方法，該方法返回字符串的一個副本（當前函數源代碼的字符串），但是null和undefined值沒有這個方法。 toString()一般不用傳參，也可以傳入基數(進制數)爲參，默

冰派甜心 2020-07-08 11:05:38

在線查看OFFICE文件

https://view.officeapps.live.com/op/view.aspx?src=你地址

[email protected] 2020-07-08 10:59:52

Vue坑點雜談（一）Module not found Error Cannot resolve file or directory

Vue坑點雜談（一）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 一、寫在開頭 這個算是學習vue的同時開的一個新坑吧，記錄一下學習過程出現的紕漏，也幫

ODST_TheSolverO5 2020-07-08 10:59:42

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量 一、寫在開頭 這個是因爲最近期末考要考web，恰好有這個知識點，所以我自己總結了一下，希望可以幫助到大家。 二、發現問題 區分什麼是局部變量，什麼是全局變量，變量之間賦值後結

ODST_TheSolverO5 2020-07-08 10:59:41