JS上傳圖片預(yù)覽插件制作(兼容到IE6)
一、實(shí)現(xiàn)圖片預(yù)覽的一些方法。
了解了一下,其實(shí)方法都是大同小異的。大概有以下幾種方式:
①訂閱input[type=file]元素的onchange事件.
一旦選擇的路徑被改變就把圖片上傳至服務(wù)器,然后就返回圖片在服務(wù)器端的地址,并且賦值到img元素上。
缺點(diǎn):工作量大,有些上傳并不是用戶最終需要上傳的圖片,但是這種方式會(huì)把上傳過程中選擇過的圖片都保存至服務(wù)器端,會(huì)造成資源浪費(fèi),而且服務(wù)器端清理臨時(shí)的那些預(yù)覽圖片也需要一定的工作量。
②利用HTML5的新特性FileReader。
這個(gè)對(duì)象提供了很多相關(guān)的方法,其中最主要用到readAsDataURL這個(gè)方法。點(diǎn)我了解更多。
缺點(diǎn):通過FileReader的readAsDataURL方法獲取的Data URI Scheme會(huì)生成一串很長(zhǎng)的base64字符串,若圖片較大那么字符串則更長(zhǎng),若頁(yè)面出現(xiàn)reflow時(shí)則會(huì)導(dǎo)致性能下降。且瀏覽器支持情況不一致,支持的瀏覽器:FF3.6+,Chrome7+,IE10+。
③使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE。
缺點(diǎn):由于IE11作了安全方面的考慮,使得在input[type=file]元素上通過value、outerHTML和getAttribute的方式都無法獲取用戶所選文件的真實(shí)地址,只能獲取到
D:\frontEnd\文件名稱。因此需使用document.selection.createRangeCollection方法來獲取真實(shí)地址。
二、我的插件制作
我選擇了比較保守的方法,就是第三種使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE的方法啦。
①第一步,HTML的布局
<div id="pic"> <img id="preview" src="../imgs/default.jpeg"> </div> <input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">
是不是想說so easy?
②第二步,插件js封裝。
1、建立對(duì)象
我主要采用了組合繼承的方式,封裝了兩個(gè)方法,分別是單張圖片上傳和多張圖片上傳。因?yàn)闊o論是單張圖片上傳還是單張圖片上傳,都需要傳入、上傳圖片的input按鈕、img標(biāo)簽、包裹著img的div、最大的單張照片的值,單位為KB。所以這四個(gè)參數(shù)在創(chuàng)建上傳圖片對(duì)象的時(shí)候就要傳入。創(chuàng)建該對(duì)象的方法如下:
var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){ this.fileObj=fileObj; this.preview=preview; this.picWrap=picWrap; this.maxImgSize=maxImgSize; }
2、定義匹配模式
因?yàn)槭巧蟼鲌D片,除了在input里面加了accept="image/*",做了初步限制之外,還需要一個(gè)js的正則來通過路徑的檢測(cè)來判定是否為圖片。所以在prototype上面定義該模式以供兩個(gè)方法使用:
SetPreviewPic.prototype.pattern=new RegExp('\.(jpg|png|jpeg)+$','i');
3、定義方法
主要就是判斷是否低于IE11的環(huán)境,編寫兩類方案。第一種就是直接通過改變img的src來預(yù)覽圖片,第二種就是在低版本的IE下,通過濾鏡來達(dá)到預(yù)覽效果。
FF、Chrome、IE11以上:(這里貼出多張圖片預(yù)覽的代碼)
<span class="Apple-tab-span"> if(maxPics){</span> <br> if(this.fileObj.files && this.fileObj.files[0]){ var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已經(jīng)有多少?gòu)垐D片了 var num=imgs.length; var html=this.picWrap.innerHTML; if(Number(num)<Number(maxPics)){ //判斷是否超過最大上傳限度 if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆蓋第一張默認(rèn)圖片 html=''; } if(this.pattern.test(fileObj.files[0].name)){ if(judgeSize(fileObj.files[0].size/1024,this.maxImgSize)){//判斷圖片的大小是否超限 html='<img class="newLoad" style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html; this.picWrap.innerHTML=html; }else{ alert('你上傳的圖片太大!'); } }else{ alert('你上傳的好像不是圖片哦,請(qǐng)檢查!'); } }else{ alert('每次最多上傳'+maxPics+'張圖片!'); } }
IE11下利用濾鏡達(dá)到效果:
var nums=this.picWrap.childNodes.length;//因?yàn)镮E6以下不支持querySelectorAll等方法,就通過childNodes的長(zhǎng)度判斷 if(nums<maxPics+2){//這里加2是因?yàn)楸緛碛幸粡埬J(rèn)的圖片,而且childNodes讀出來的長(zhǎng)度會(huì)多1 this.fileObj.select(); if(document.selection){ var imgSrc=document.selection.createRange().text; var image=new Image(); image.src=imgSrc; filesize=image.fileSize; if(judgeSize(image.fileSize/1024,this.maxImgSize)){ //IE下必須設(shè)置div的大小 var ele=document.createElement('div'); ele.style.width=width+'px'; ele.style.height=height+'px'; ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')"; try{ this.picWrap.appendChild(ele); }catch(e){ alert('你上傳的圖片格式有誤,請(qǐng)重新選擇!'); return false; } this.preview.style.display='none'; document.selection.empty(); }else{ alert('你上傳的圖片太大!'); } }
至此,就完成啦!
用法:
<script type="text/javascript" src="../js/singlePic.js"></script> <script> var fileObj=document.getElementById('uploadBtn'); var preview=document.getElementById('preview'); var picWrap=document.getElementById('pic'); fileObj.onchange=function(){ var obj=new SetPreviewPic(fileObj,preview,picWrap,100); //定義上傳圖片對(duì)象,參數(shù)分別為上傳圖片的input按鈕、img標(biāo)簽包、裹著img的div、最大的單張照片的值,單位為KB obj.uploadSinglePic(200,250);//單張圖片上傳,參數(shù)分別為每張的寬度、高度 // obj.uploadPics(200,250,2); //多張圖片上傳,參數(shù)分別為每張的寬度、高度、最多上傳張數(shù) } </script>
以上所述是小編給大家介紹的JS上傳圖片預(yù)覽插件制作(兼容到IE6)的相關(guān)知識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 手機(jī)圖片預(yù)覽插件photoswipe.js使用總結(jié)
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- javascript IE7 瀏覽器本地圖片預(yù)覽
- 純JS實(shí)現(xiàn)的批量圖片預(yù)覽加載功能
- 兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
- 輕松實(shí)現(xiàn)js圖片預(yù)覽功能
- javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
- 純JS實(shí)現(xiàn)本地圖片預(yù)覽的方法
- JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
- Jquery.LazyLoad.js修正版下載,實(shí)現(xiàn)圖片延遲加載插件
- jcarousellite.js 基于Jquery的圖片無縫滾動(dòng)插件
- JS實(shí)現(xiàn)的圖片預(yù)覽插件與用法示例【不上傳圖片】
相關(guān)文章
JS對(duì)select控件option選項(xiàng)的增刪改查示例代碼
Javascript操作select是表單中比較常見的,大家可以在網(wǎng)上搜索到很多的相關(guān)資料,接下來為大家詳細(xì)介紹下,JS動(dòng)態(tài)操作select中的各種方法,感興趣的朋友可以參考下2013-10-10JS中獲取 DOM 元素的絕對(duì)位置實(shí)例詳解
這篇文章主要介紹了JS中獲取 DOM 元素的絕對(duì)位置,詳細(xì)介紹了各種獲取dom元素絕對(duì)位置的方法及對(duì)應(yīng)的兼容性,需要的朋友參考下吧2018-04-04純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
純javascript代碼實(shí)現(xiàn)計(jì)算器功能,接下來,由小編給大家分享一下用純javascript代碼編寫的計(jì)算器程序,需要的朋友可以參考下2015-09-09微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼
這篇文章主要介紹了基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼,該功能在很多網(wǎng)站上都有著廣泛的應(yīng)用,本文以實(shí)例形式對(duì)其進(jìn)行介紹,需要的朋友可以參考下2014-10-10js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果
這篇文章主要介紹了js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果,涉及JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01javascript圖片延遲加載實(shí)現(xiàn)方法及思路
這篇文章主要介紹了javascript圖片延遲加載實(shí)現(xiàn)方法及思路,有時(shí)我們需要用懶加載,也就是延遲加載圖片的方式,來提高網(wǎng)站的親和力,需要的朋友可以參考下2015-12-12淺析location.href跨窗口調(diào)用函數(shù)
本文詳細(xì)介紹了location.href跨窗口調(diào)用函數(shù),具體的使用方法及實(shí)例,有需要的朋友可以參考下2016-11-11