input file 预览图片、上传后清空选择文本框信息

1.上传文件之后，想预览上传的图片，input框的accept限制上传文件的类型，multiple为多文件上传，<div id="imglist"></div>用于存放图片。

html代码：

//多文件上传<input type="file" class="upload_image" id="fileupload" accept="image/*" multiple > //预览图片<div id="imglist">  </div> 

2.获取上传的文件，多文件的需要遍历file,根据需要判断文件大小，拼接文件路径，将图片显示在<div id="imglist"></div>

js代码：

$("#fileupload").change(function () {   var file = $(this)["0"].files;   var windowURL = window.URL || window.webkitURL;    for (let i = 0; i < file.length; i++) {      //限制图片大小      if (file[i].size > 1024 * 1024 * 2) {         alert('图片大小不能超过 2MB!');      }      //预览图片      var dataURL = windowURL.createObjectURL(file[i]);      $('#imglist').append($('<img/>').attr('src', dataURL));   } }

3.提交成功后，清空预览图片和文件路径。

//清空预览的图片 $('#imglist').empty();  //几个文件状态->未选中文件var obj = document.getElementById('fileupload') ;  obj.outerHTML=obj.outerHTML;