Two methods for implementing multi-image upload preview using js front-end-JS Tutorial-php.cn

Two methods for implementing multi-image upload preview using js front-end

高洛峰

Release： 2016-12-06 15:03:26

Original

1255 people have browsed it

1. How to convert pictures into icon codes

html code:

<div class="yanzRight">
    <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/>
    <span class="dui" id="imgOrder_dui" style="display: none;"></span>
</div>
    <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
    <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/>
</div>

Copy after login

js code

//图片预览功能
function previewImage(file,imgNum)
{
 var MAXWIDTH = 200;
 var MAXHEIGHT = 200;
 var div = document.getElementById(&#39;preview&#39;+imgNum);
 if (file.files && file.files[0])
 {
   div.innerHTML =&#39;<img id=imghead&#39;+imgNum+&#39;>&#39;;
   var img = document.getElementById(&#39;imghead&#39;+imgNum+&#39;&#39;);
   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+&#39;px&#39;;
    img.style.marginTop = rect.top+&#39;px&#39;;
   }
   var reader = new FileReader();
   reader.onload = function(evt){img.src = evt.target.result;}
   reader.readAsDataURL(file.files[0]);
 }
 else //
 {
  var sFilter=&#39;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="&#39;;
  file.select();
  var src = document.selection.createRange().text;
  div.innerHTML = &#39;<img id=imghead&#39;+imgNum+&#39;>&#39;;
  var img = document.getElementById(&#39;imghead2&#39;);
  img.filters.item(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = src;
  var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  status =(&#39;rect:&#39;+rect.top+&#39;,&#39;+rect.left+&#39;,&#39;+rect.width+&#39;,&#39;+rect.height);
  div.innerHTML = "<div id=divhead"+imgNum+" style=&#39;width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"&#39;></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;
}

Copy after login

2. Another way to use js to select multiple pictures at once for preview display

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试页面</title>
<script type="text/javascript">
  //下面用于多图片上传预览功能
  function setImagePreviews(avalue) {
    var docObj = document.getElementById("doc");
    var dd = document.getElementById("dd");
    dd.innerHTML = "";
    var fileList = docObj.files;
    for (var i = 0; i < fileList.length; i++) {     
 
      dd.innerHTML += "<div style=&#39;float:left&#39; > <img id=&#39;img" + i + "&#39; /> </div>";
      var imgObjPreview = document.getElementById("img"+i);
      if (docObj.files && docObj.files[i]) {
        //火狐下，直接设img属性
        imgObjPreview.style.display = &#39;block&#39;;
        imgObjPreview.style.width = &#39;150px&#39;;
        imgObjPreview.style.height = &#39;180px&#39;;
        //imgObjPreview.src = docObj.files[0].getAsDataURL();
        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
      }
      else {
        //IE下，使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        alert(imgSrc)
        var localImagId = document.getElementById("img" + i);
        //必须设置初始大小
        localImagId.style.width = "150px";
        localImagId.style.height = "180px";
        //图片异常的捕捉，防止用户修改后缀来伪造图片
        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 = &#39;none&#39;;
        document.selection.empty();
      }
    }
 
    return true;
  }
 
</script>
</head>
 
<body>
<div style="margin :0px auto; width:990px;">
<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
<div id="dd" style=" width:990px;"></div>
</div>
</body>
</html>

Copy after login