Home > Article > Web Front-end > Two methods for implementing multi-image upload preview using js front-end

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

高洛峰Original: 2016-12-06 15:03:261293browse

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>

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;
}

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript cookie technologyNext article：Detailed explanation of JavaScript cookie technology

See more

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

Related articles