方法一:uploadPreview图片上传预览插件:
1.首先在html页面的head中引入jQuery库文件和uploadPreview图片上传预览插件文件.
<script src="http://www.youhutong.com/static/js/jquery.js"></script> <script src="./uploadPreview.js" type="text/javascript"></script>
2.添加JS.当然下面的ID都是看HTML定义的.
<script>
$(function(){
//up: input(文件域)的ID. ImgPr:显示预览图片的img标签的ID
//Width:设置宽. Height:设置高
$("#up").uploadPreview({Img:"ImgPr", Width:120, Height:120 });
});
</script>全部代码:
<!-- 演示 start -->
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script src="./uploadPreview.js" type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr", Width:120, Height:120 });
});
</script>
<div style="widht:100%; text-align:center;">
<div style="text-align:center; margin:0 auto;">
<img id="ImgPr" width="120" height="120" />
</div>
<input type="file" id="up" />
</div>
<!-- 演示 end -->方法二:JS在线预览方法:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片预览 - 小川编程</title>
</head>
<script type="text/javascript">
function setImageView(val,avalue) {
var docObj=document.getElementById(val);
var imgObjPreview=document.getElementById(avalue);
if(docObj.files &&docObj.files[0]){
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '170px';
imgObjPreview.style.height = '80px';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById(avalue);
localImagId.style.width = "170px";
localImagId.style.height = "80px";
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>
<div id="localImag"><img id="thumb" src="" width="150" height="180" /></div>
<input type="file" name="thumb" id="input_thumb" style="width:150px;"
onchange="setImageView('input_thumb','thumb');" />
<p>来源:<a href="http://www.youhutong.com/">小川编程:http://www.youhutong.com/</a></p>
</body>
</html>复制上面的代码去看看效果吧!
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/41.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
