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://m.b3g6.com/bcjs/16695.html' + reallocalpath + '')'; // 設(shè)置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- 下預(yù)覽上傳的圖片了。
在這里，有必要對幾個參數(shù)說明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可選。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true：默認值。濾鏡激活。 false：濾鏡被禁止。sizingMethod：可選。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
crop：剪切圖片以適應(yīng)對象尺寸。 image：默認值。增大或減小對象的尺寸邊界以適應(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中文本字符處理的簡單方法記錄2. 使用Blazor框架實現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel3. 如何從Python的cmd中獲得.py文件參數(shù)4. ASP基礎(chǔ)知識Command對象講解5. vscode運行php報錯php?not?found解決辦法6. Python-openpyxl表格讀取寫入的案例詳解7. Python使用Selenium自動進行百度搜索的實現(xiàn)8. JavaScript實現(xiàn)留言板實戰(zhàn)案例9. PHP laravel實現(xiàn)導(dǎo)出PDF功能10. JS中6個對象數(shù)組去重的方法
網(wǎng)公網(wǎng)安備