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)代瀏覽器來(lái)說(shuō)，要實(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.4tl426be.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ù)覽上傳的圖片了。
在這里，有必要對(duì)幾個(gè)參數(shù)說(shuō)明一下，以免后人再入坑！
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ì)于單張圖片，可以通過(guò)<form>表單提交，但對(duì)于多張圖片，這需要flash技術(shù)的支持，實(shí)現(xiàn)起來(lái)相當(dāng)麻煩。
這里，樓主推薦一個(gè)現(xiàn)有的輪子：webuploader 組件。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《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. 解決Android Studio Design界面不顯示layout控件的問(wèn)題2. python mysql 字段與關(guān)鍵字沖突的解決方式3. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼4. Python加載數(shù)據(jù)的5種不同方式(收藏)5. python讀取中文路徑時(shí)出錯(cuò)(2種解決方案)6. Python用K-means聚類算法進(jìn)行客戶分群的實(shí)現(xiàn)7. python編寫(xiě)五子棋游戲8. Java源碼解析之接口List9. Java xml數(shù)據(jù)格式返回實(shí)現(xiàn)操作10. layui Ajax請(qǐng)求給下拉框賦值的實(shí)例
網(wǎng)公網(wǎng)安備