发现一个特别小巧的jquery插件可以在选择的时候显示小图

最新推荐文章于 2020-01-15 09:33:59 发布

何大首乌

最新推荐文章于 2020-01-15 09:33:59 发布

阅读量668

点赞数 1

分类专栏： WEB插件文章标签：选择图片回显

本文链接：https://blog.csdn.net/Shangshan_Ruohe/article/details/70858126

版权

WEB插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个特表小的jQuery插件，小到忽略不计了，它可以实现在上传图片的时候选择图片的回显到页面上，很好啊，很简单

这是例子，也就是全部的代码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
      //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 90; 
          var MAXHEIGHT = 90;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead οnclick=$("#previewImg").click()>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
    </script>
</head>
<body>
<div id="addCommodityIndex">
   
            
             <!--input-group start-->
            <div class="input-group row">
                <div class="col-sm-3">
                    <label>商品图片</label>
                </div>
                <div class="col-sm-9 big-photo">
                	<div id="preview">
                        <img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" οnclick="$('#previewImg').click();">
                     </div>         
                    <input type="file" οnchange="previewImage(this)" style="display: none;" id="previewImg">
                	<!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                </div>
            </div>
            <!--input-group end-->
       
</div>

</body>
</html>

加入上述代码后给一个文件目录，这里用的是img

然后给一张默认的图就好了，至此就全部结束了，也不需要引入任何的东西