javascript實現的圖片預覽和上傳功能示例【兼容IE 9】
本文實例講述了javascript實現的圖片預覽和上傳功能。分享給大家供大家參考，具體如下：
下載DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload
對于現代瀏覽器來說，要實現圖片預覽非常簡單：
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上兩種方法分別可以得到一個base64和一個blob對象的URL地址，從而實現預覽。但是，他們只支持在IE10+，顯然這是不夠的，如何實現低版本IE瀏覽器的圖片預覽呢？代碼如下：
<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://m.propowerdrill.cn/bcjs/16695.html' + reallocalpath + '')'; // 設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片 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- 下預覽上傳的圖片了。
在這里，有必要對幾個參數說明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可選。布爾值(Boolean)。設置或檢索濾鏡是否激活。
true：默認值。濾鏡激活。 false：濾鏡被禁止。sizingMethod：可選。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
crop：剪切圖片以適應對象尺寸。 image：默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。 scale：縮放圖片以適應對象的尺寸邊界。src： 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
以上，可以實現低版本IE瀏覽器的圖片預覽，但要上傳到服務器還需要一番周折。對于單張圖片，可以通過<form>表單提交，但對于多張圖片，這需要flash技術的支持，實現起來相當麻煩。
這里，樓主推薦一個現有的輪子：webuploader 組件。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章：
1. ASP.Net MVC利用NPOI導入導出Excel的示例代碼2. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)3. bootstrap select2 動態從后臺Ajax動態獲取數據的代碼4. Python OpenCV實現測量圖片物體寬度5. asp文件用什么軟件編輯6. Python使用openpyxl復制整張sheet7. python opencv把一張圖片嵌入（疊加）到另一張圖片上的實現代碼8. Android通過Java sdk的方式接入OpenCv的方法9. python 基于opencv 實現一個鼠標繪圖小程序10. PHP擴展之APC——Alternative PHP Cache(可選PHP緩存)
網公網安備