`

上传图片本地预览

JavaScript
阅读更多
<html>
   <head>
     <title>a test for selection object</title>
     <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
     <script type='text/javascript'>
        $(function(){
            $("#addImage").click(function() {
                 if($("ul#files li").size() < 6){
                       $("<li><input type='file' accept='image/bmp,image/png,image/gif,image/jpeg' value='' name='upload' onchange='previewImage(this)'>&nbsp;(图片格式：*.bmp,*.png,*.gif,*.jpeg)<input type='button' value='删除' onclick='removeItem(this)'/><div class='preview'></div></li>").appendTo("#files"); 
                  } else {
                  alert("添加图片数量不能超过6个");
                }
             });
        });

        function removeItem(obj) {
           $(obj).parent("li").remove();
        };

        function previewImage(file)
    {
      var MAXWIDTH  = 200;
      var MAXHEIGHT = 200;
      var div = file.parentNode.childNodes[3];
     
       if (file.files && file.files[0])
       {
        div.innerHTML = '<img class=imghead>';
        var img = div.getElementsByTagName('img')[0];
        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
       {
          var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
          file.select();
          var src = document.selection.createRange().text;
          var i = 0;
          div.innerHTML = "<img id=imghead>";
          i = i + 1;
          //div.innerHTML = '<img class=imghead>';
          var img = div.getElementsByTagName('img')[0];
          img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
      
          //TODO临时解决
          var rect = {top:44, left:0, width:200, height:113};
          status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
          div.innerHTML = "<div class='divhead' style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
         
          //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          //status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
          //div.innerHTML = "<div class='divhead' "+200+"px;height:"+200+"px;margin-top:"+200+"px;margin-left:"+200+"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>
     <form>
        <ul id="files">
            <li><input type="file" onchange="previewImage(this)" class="input-file" id="ss" accept="image/bmp,image/png,image/gif,image/jpeg" value="" name="upload">&nbsp;(图片格式：*.bmp,*.png,*.gif,*.jpeg)<label class="error"></label><div class="preview" id="preview"></div></li>
        </ul>
          <input id="addImage" type="button" value="继续添加" />
     </form>
   </body>
</html>  

备注：
IE下会有问题
分享到：
| java笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics