Heim > Artikel > Web-Frontend > Zwei Methoden zum Implementieren der Upload-Vorschau für mehrere Bilder mithilfe des js-Frontends

Zwei Methoden zum Implementieren der Upload-Vorschau für mehrere Bilder mithilfe des js-Frontends

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

1. So konvertieren Sie Bilder in Symbolcodes

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. Eine andere Möglichkeit, mit js mehrere Bilder gleichzeitig für die Vorschauanzeige auszuwählen

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der JavaScript-Cookie-TechnologieNächster Artikel：Detaillierte Erläuterung der JavaScript-Cookie-Technologie

In Verbindung stehende Artikel

Mehr sehen