上傳圖片預覽JS腳本 Input file圖片預覽的實現(xiàn)示例
更新時間：2014年10月23日 17:17:24 投稿：whsnow
需要一個用戶上傳頭像預覽的功能，因此寫了一段上傳圖片預覽JS腳本,Input file圖片預覽的實現(xiàn)，需要的朋友可以看看
在深圳做項目的時候，需要一個用戶上傳頭像預覽的功能！是在網(wǎng)上找了好多，都不太滿意。要么是flash的，要么是Ajax上傳后返回圖片路徑的，要么壓根就是不能用的。幸運的是在這個項目以前有人寫過一個圖片預覽的功能，還被我給翻了出來，在這里做個記錄，方便自己以后用，也方便其他需要的朋友！
代碼很簡單，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于圖片上傳預覽功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//圖片異常的捕捉，防止用戶修改后綴來偽造圖片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
測試在IE8，F(xiàn)F12.0和谷歌chrome 28.0.1500.72都能用!
相關文章
擴展運算符 (spread syntax) 是 ES6 提供的一種非常便捷的新語法，給我們操作數(shù)組和對象帶來了非常大的便利，我在很多文章中也提到了這個語法。但是其實擴展運算符的用法還是比較多比較雜的，我用一篇文章來做一下總結(jié)，梳理一下擴展運算的語法和使用細節(jié)。2020-11-11
js氣泡效果，在項目需求中經(jīng)常遇到。今天小編把大概實現(xiàn)步驟分享到腳本之家平臺，感興趣的朋友可以參考下2016-05-05
老生常談JavaScript面向?qū)ο蠡A與this指向問題
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向?qū)ο蠡A與this指向問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
文字滾動顯示，是網(wǎng)頁企業(yè)公告，文字鏈廣告常用的一種效果，說不定在什么時候你就能看到它。2010-05-05
Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實例分析)
以下是對confirm的用法進行了分析介紹，需要的朋友可以參考下2013-07-07
livereload工具實現(xiàn)前端可視化開發(fā)【推薦】
本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧2016-12-12
本文主要介紹了原生js仿瀏覽器滾動條效果的實例。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法
這篇文章主要介紹了Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實現(xiàn),需要的朋友可以參考下2016-05-05
這篇文章主要介紹了js生成二維碼的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了JS+CSS實現(xiàn)DIV層的展開、收縮效果，以兩個完整實例介紹了JS控制DIV層的展開、收縮效果，感興趣的小伙伴們可以參考一下2016-01-01