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=\"" + 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 id="form1" runat="server">
<div>
選擇圖片：<input type="file" size="20" id='preview_fake'" />
</div>
<div id="preview" 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程式設計有所幫助。