Heim > Web-Frontend > js-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2016-12-06 15:03:26
Original
1302 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren


Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage