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

最新推荐文章于 2024-09-06 21:16:04 发布

原创最新推荐文章于 2024-09-06 21:16:04 发布 · 8.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JS #上传图片

web前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何在HTML中利用input file实现图片预览，并在图片上传后清除输入框信息。通过设置input框的accept属性限制上传文件类型，使用multiple支持多文件上传。使用JavaScript获取并遍历文件，判断文件大小，动态生成预览图展示在页面上。上传成功后，清空input选择框。

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;