javascript實現(xiàn)的圖片預(yù)覽和上傳功能示例【兼容IE 9】
本文實例講述了javascript實現(xiàn)的圖片預(yù)覽和上傳功能。分享給大家供大家參考，具體如下：
下載DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload
對于現(xiàn)代瀏覽器來說，要實現(xiàn)圖片預(yù)覽非常簡單：
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上兩種方法分別可以得到一個base64和一個blob對象的URL地址，從而實現(xiàn)預(yù)覽。但是，他們只支持在IE10+，顯然這是不夠的，如何實現(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.cgvv.com.cn/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ù)覽上傳的圖片了。
在這里，有必要對幾個參數(shù)說明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可選。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true：默認(rèn)值。濾鏡激活。 false：濾鏡被禁止。sizingMethod：可選。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop：剪切圖片以適應(yīng)對象尺寸。 image：默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。 scale：縮放圖片以適應(yīng)對象的尺寸邊界。src： 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會作用。
以上，可以實現(xiàn)低版本IE瀏覽器的圖片預(yù)覽，但要上傳到服務(wù)器還需要一番周折。對于單張圖片，可以通過<form>表單提交，但對于多張圖片，這需要flash技術(shù)的支持，實現(xiàn)起來相當(dāng)麻煩。
這里，樓主推薦一個現(xiàn)有的輪子：webuploader 組件。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章：
1. python中scrapy處理項目數(shù)據(jù)的實例分析2. 快速搭建Spring Boot+MyBatis的項目IDEA（附源碼下載）3. js抽獎轉(zhuǎn)盤實現(xiàn)方法分析4. IntelliJ IDEA導(dǎo)入jar包的方法5. Python requests庫參數(shù)提交的注意事項總結(jié)6. GIT相關(guān)-IDEA/ECLIPSE工具配置的教程詳解7. 教你在 IntelliJ IDEA 中使用 VIM插件的詳細(xì)教程8. python dict如何定義9. 如何基于Python實現(xiàn)word文檔重新排版10. vue-electron中修改表格內(nèi)容并修改樣式
網(wǎng)公網(wǎng)安備