本文實例講述了js實現的在本地預覽圖片功能。分享給大家供大家參考，具體如下：
移動web
<body>
<form enctype="multipart/form-data" name="form1">
上傳文件：<input id="f" type="file" name="f" onchange="change()" />
預覽：<img id="preview" alt="" name="pic" width="300" height="150" />
</form>
<script>
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js獲取文件名的后綴
html5Reader(file);
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
</script>
</body>
</html>
兼容ie版本
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif在IE瀏覽器暫時無法顯示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("文件必須為圖片！"); return;
}
// IE瀏覽器
if (document.all) {
file.select();
var reallocalpath = document.selection.createRange().text;
var ie6 = /msie 6/i.test(navigator.userAgent);
// IE6瀏覽器設置img的src為本地路徑可以直接顯示圖片
if (ie6) pic.src = reallocalpath;
else {
// 非IE6版本的IE由于安全問題直接設置img的src無法顯示本地圖片，但是可以通過濾鏡來實現
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
html5Reader(file);
}
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
