파일 태그를 사용하여 다중 이미지 파일 업로드 미리보기 구현

js 코드:

<script> 
 //下面用于多图片上传预览功能
 function setImagePreviews(avalue) {
 var docObj = document.getElementById("files");
 var dd = document.getElementById("preview");
 dd.innerHTML = "";
 var fileList = docObj.files;
 for (var i = 0; i < fileList.length; i++) {
  dd.innerHTML += "<p style=&#39;float:left&#39; > <img id=&#39;img" + i + "&#39; /> </p>";
  var imgObjPreview = document.getElementById("img"+i);
  if (docObj.files && docObj.files[i]) {
  //火狐下，直接设img属性
  imgObjPreview.style.display = &#39;block&#39;;
  //控制缩略图大小
  imgObjPreview.style.width = &#39;70px&#39;;
  imgObjPreview.style.height = &#39;70px&#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 = "70px";
  localImagId.style.height = "70px";
  //图片异常的捕捉，防止用户修改后缀来伪造图片
  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>

HTML 코드:

<form method="post" enctype="multipart/form-data">  
  <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="files" name="files" multiple onchange="javascript:setImagePreviews();" />
  <input type="button" id="upload" value="上传" />
  <p id="preview">  
  </p> 
</form>

파일 태그를 사용하여 다중 이미지 파일 업로드 미리보기 구현에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!