当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用file标签实现多图文件上传预览

用file标签实现多图文件上传预览

2019年03月25日  | 移动技术网IT编程  | 我要评论

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 += "<div style='float:left' > <img id='img" + i + "' /> </div>";
 var imgobjpreview = document.getelementbyid("img"+i);
 if (docobj.files && docobj.files[i]) {
 //火狐下，直接设img属性
 imgobjpreview.style.display = 'block';
 //控制缩略图大小
 imgobjpreview.style.width = '70px';
 imgobjpreview.style.height = '70px';
 //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 = 'none';
 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="上传" />
 <div id="preview"> 
 </div> 
</form>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网