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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值