javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能示例【兼容IE 9】
本文實(shí)例講述了javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能。分享給大家供大家參考，具體如下：
下載DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload
對(duì)于現(xiàn)代瀏覽器來說，要實(shí)現(xiàn)圖片預(yù)覽非常簡(jiǎn)單：
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上兩種方法分別可以得到一個(gè)base64和一個(gè)blob對(duì)象的URL地址，從而實(shí)現(xiàn)預(yù)覽。但是，他們只支持在IE10+，顯然這是不夠的，如何實(shí)現(xiàn)低版本IE瀏覽器的圖片預(yù)覽呢？代碼如下：
<html xmlns='http://www.w3.org/1999/xhtml'> <head> <script type='text/javascript' language='javascript'> $(’#preview_fake’).change(function () { previewImg($(this), $(’#preview’)); }); function previewImg($inputId, $previewId) { var inputId = $inputId[0],previewId = $previewId[0]; $previewId.empty(); if(/msie/.test(navigator.userAgent.toLowerCase())){if($.support.version == 6.0){ $previewId.attr('src',inputId.value);}else{ inputId.select(); var reallocalpath = document.selection.createRange().text; previewId.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=’scale’,src='http://www.intensediesel.com/bcjs/16695.html' + reallocalpath + '')'; // 設(shè)置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認(rèn)圖片 previewId.src = ’data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==’;} }else {$previewId.attr('src',window.URL.createObjectURL(previewFake.files[0])); } } </script> </head> <body> <form runat='server'> <div> 選擇圖片：<input type='file' size='20' id=’preview_fake’' /> </div> <div style='width: 300px; height: 300px'> </div> </form> </body></html>
這樣，我們就能夠在IE10- 下預(yù)覽上傳的圖片了。
在這里，有必要對(duì)幾個(gè)參數(shù)說明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可選。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true：默認(rèn)值。濾鏡激活。 false：濾鏡被禁止。sizingMethod：可選。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。
crop：剪切圖片以適應(yīng)對(duì)象尺寸。 image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。 scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。src： 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。
以上，可以實(shí)現(xiàn)低版本IE瀏覽器的圖片預(yù)覽，但要上傳到服務(wù)器還需要一番周折。對(duì)于單張圖片，可以通過<form>表單提交，但對(duì)于多張圖片，這需要flash技術(shù)的支持，實(shí)現(xiàn)起來相當(dāng)麻煩。
這里，樓主推薦一個(gè)現(xiàn)有的輪子：webuploader 組件。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《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)文章：
1. 部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)2. html清除浮動(dòng)的6種方法示例3. JavaScript實(shí)現(xiàn)組件化和模塊化方法詳解4. Python基于Serializer實(shí)現(xiàn)字段驗(yàn)證及序列化5. idea設(shè)置自動(dòng)導(dǎo)入依賴的方法步驟6. PHP字符串前后字符或空格刪除方法介紹7. 網(wǎng)頁中img圖片使用css實(shí)現(xiàn)等比例自動(dòng)縮放不變形（代碼已測(cè)試）8. Python安裝并操作redis實(shí)現(xiàn)流程詳解9. JSP之表單提交get和post的區(qū)別詳解及實(shí)例10. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】
網(wǎng)公網(wǎng)安備