JS实现的图片预览功能
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JS实现的图⽚预览功能
之前的博⽂有实现过图⽚上传预览，但那种⽅法是预览时就将图⽚上传，会产⽣很⼤的浪费空间。
找到了之前有⼈写的⽤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="/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>。