1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

Jquery图片在线预览.uploadPreview图片上传预览插件.兼容IE.谷歌.火狐等等浏览器

小川 特效组件
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。
  如侵犯到任何版权问题,请立即告知本站(侵权投诉),本站将及时删除并致以最深的歉意
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

方法一: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>

复制上面的代码去看看效果吧!

 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/41.html


  1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
  2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
  3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
  4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 3 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情