首頁 > web前端 > js教程 > 用file標籤實現多圖檔案上傳預覽

用file標籤實現多圖檔案上傳預覽

高洛峰
發布: 2017-02-17 17:03:20
原創
1669 人瀏覽過

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程式碼:


rrrereee個人圖使用更多內容標籤!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板