之前的博文有實現過圖片上傳預覽，但那種方法是預覽時就將圖片上傳，會產生很大的浪費空間。找到了之前有人寫的用JS實現的圖片預覽，就說用js將上傳的圖片顯示，上傳代碼在之前的博文中有寫到。
以下是實現的代碼：
大體上前台預覽有兩種，第一種是把圖片在瀏覽器上做緩存，然后獲取緩存地址；第二種是將圖片轉換為base64 字符串。
一、將圖片在瀏覽器上做緩存
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>
js：
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;
}
這樣就實現了圖片的預覽。
二、將圖片轉換為base64格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="/file/upload">
<input onchange="previewImage(this, 'prvid')" type="file" name="file"/>
<input type="submit" value="上傳"/>
</form>
<div id="prvid">預覽容器</div>
</body>
<script type="text/javascript">
function previewImage(file, prvid) {
/* file：file控件
* prvid: 圖片預覽容器
*/
var tip = "Expect jpg or png or gif!"; // 設定提示信息
var filters = {
"jpeg" : "/9j/4",
"gif" : "R0lGOD",
"png" : "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if (window.FileReader) { // html5方案
for (var i = 0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if (!validateImg(src)) {
alert(tip)
} else {
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降級處理
if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
alert(tip);
} else {
showPrvImg(file.value);
}
}
function validateImg(data) {
var pos = data.indexOf(",") + 1;
for ( var e in filters) {
if (data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
}
function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
}
}
</script>
</html>