溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了javascript如何實現圖片預覽和上傳功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
對于現代瀏覽器來說，要實現圖片預覽非常簡單：
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" >
</div>
</form>
</body>
</html>這樣，我們就能夠在IE10- 下預覽上傳的圖片了。
在這里，有必要對幾個參數說明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可選。布爾值(Boolean)。設置或檢索濾鏡是否激活。
sizingMethod：可選。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
src： 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。
以上，可以實現低版本IE瀏覽器的圖片預覽，但要上傳到服務器還需要一番周折。對于單張圖片，可以通過<form>表單提交，但對于多張圖片，這需要flash技術的支持，實現起來相當麻煩。
這里，樓主推薦一個現有的輪子：webuploader 組件。
看完上述內容，是不是對javascript如何實現圖片預覽和上傳功能有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
