<html>
<head>
<title>js实现图片上传预览功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<form action="#" name="form" method="post" enctype="multipart/form-data">
<input type='file' name='file' id='fileid' onchange="javascript:setImagePreview('localImag','fileid','previews');">
</form>
<div id="localImag" class='hide'>
<img id="previews" border="0" src="" width="41" height="41" style="display: block;">
</div>
<script type="text/javascript">
$(function () {
$('.hide').hide();
})
/**
* @param string divid div框id
* @param string inputid input框id
* @param string imgid img标签id
*/
function setImagePreview(divid,inputid,imgid)
{
$('.hide').show();
var docObj=document.getElementById(inputid);
var width=$('#'+imgid).attr('width');
var height=$('#'+imgid).attr('height');
var imgObjPreview=document.getElementById(imgid);
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = width;
imgObjPreview.style.height = height;
//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(divid);
//必须设置初始大小
localImagId.style.width = width;
localImagId.style.height = height;
//图片异常的捕捉,防止用户修改后缀来伪造图片
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>
</body>
</html>
js实现图片上传预览功能
最新推荐文章于 2024-08-25 09:57:22 发布