jQuery实现输入【类型=文件】多图片预览上传删除功能

先来看看上传多张图片时，如何预览、上传、删除等功能。下图是功能实现的预览效果。虽然款式有点丑，但是功能实现了。话不多说，直接看代码会更直观。

首先定义基本格式，样式代码会自己补充：

Body div class=' upload-header '输入id=' upload ' type=' file ' accept=' image/* ' multiple=' multiple '按钮class=' BTN '点击上传/按钮/div class=' img-box '！-保存预览图片-/div/正文

然后定义具体的js实现代码。我是基于JQ开发的，方便DOM操作。

1.预览功能的实现

在这里听输入[type=file]的变化事件。在回调函数中，获取临时存储区中的文件e.target.files。通过遍历文件属性，使用FileReader函数读取文件的值，然后使用append方法将图片放入指定的框中。注意：FileReader是一种异步文件读取机制，结合input:file可以轻松读取本地文件。

imgPreview:函数(){ var=this；$('.上传-标题')。on('change '，' #upload '，函数(e){ var files=e . target . files；if(files . length 0){ for(var I=0；I .文件.长度；I){ var reader=new file reader()；读者。onload=function(){ var text=` div class=' img-list ' img src=' http : $ { this。结果} ' alt=' div class=' del-img ' delete/div/div ` $('。img-box ')。追加(。};reader.readAsDataURL(文件[I])；that . filestlist . push(file[I])；};};}) }2.图像删除功能

这里使用on方法将click事件添加到预览图片中，这主要是因为on方法可以继续监控后面添加的dom。当你需要删除一张照片时，只需删除它的父节点和下面的节点。此时，请记住相应地删除临时存储区域中的文件文件列表。

delImage:函数(){ var=this；$ ('.img-box ')。打开('点击'，'。del-img '，function(){ var del status=confirm('您确定要删除此图片吗？);if (delStatus) { var index=$(this)。父项()。index()；$(这个)。父项()。移除()；that . FileList . splice(索引，1)；Console.log('我删除了它'，索引)；};});}2.图像批量上传功能

我定义了两种上传图片的方法。第一种方法是点击上传，然后遍历所有文件，然后依次转移上传方式(因为七牛上传工具只支持单个文件上传，所以采用遍历方式)。第二种方法，使用jq的ajax post上传模式，使用FormData实例，添加文件属性进行上传。因为是批量上传，所以我用定义临时变量标志的方法来判断是否所有文件都上传了。当标志的值与文件列表的数量一致时，我可以判断所有上传都完成了。如果有其他好的方法可以留言交流，就用低比较的方法。

单击Upload:函数(){ var=this；var filesList=this.filesList$('.BTN’)。on('click '，function(){ that . flag=0；if(FileList . length 0){ for(var I=0；I文件列表. length；I){ that . uploadmethod(filestlist[I])；} };}) }，upLoadMethod:函数(文件){ var即=thisvar formData=new formData()；formData.append('file '，file)；$.ajax({ type: 'post '，URL : ' http://172 . 16 . 1 . 99:8703/file/upload '，data: formData，mimetype : ' multipart/form-data '，Datatype:' JSON '，async: false，cache: false，//上传没有缓存的文件contenttype3360 false，//需要设置为false。因为它是一个FormData对象，并且属性enctype=' multipart/form-data ' process data :声明为false，//它需要设置为false。由于数据值是一个FormData对象，因此没有必要处理数据success :函数(response) {that。标志=1；如果(那。flag===那个。文件列表。长度){控制台。日志(‘我上传的’)；};}，错误：函数(err) {console.log('上传失败')；} });}，以下是完整的js代码供参考：

脚本函数UploadFunction(name){ this。name=name这个。init()；};UploadFunction.prototype={ //初始化init:函数(){这个。单击上传()；这个。img preview()；这个。delimage()；},标志： 0,文件列表： [],//点击上传单击上传：函数(){ var=thisvar filesList=this.filesList $('。BTN ' .on('click ')，function(){即。标志=0；if(文件列表。长度0){ for(var I=0；我文件列表。长度；我){那个。upload method(filestlist[I])；} };}) }，imgPreview:函数(){ var即=this$('。上传-标题')。打开('更改'，' #上传'，函数{ var files=e . target。文件；console.log(文件);if(文件。长度0){ for(var I=0；我。文件。长度；I){ var reader=new file reader()；读者。onload=function(){ var text=' div class=' img-list ' img src=' http : $ { this。结果} ' alt=' div class=' del-img '删除/div /div ` $(' .img-box ').追加（文本);};reader.readAsDataURL(文件[I])；那个。文件列表。推送(文件[I])；};};}) }，upLoadMethod:函数（文件){ var即=this var formData=new formData()；formData.append('file '，file)；$.ajax({ type: 'post '，url: '这里使用上传的地址/upload '，data: formData，mime类型： ' multipart/form-data '，dataType: 'json '，async: false，cache: false，//上传文件不需要缓存contentType: false，//需设置为假的。因为是上传对象，且已经声明了属性enctype=' multipart/form-data ' process data : false，//需设置为假的。因为数据值是上传对象，不需要对数据做处理成功：函数（响应){那个。标志=1；如果(那个。flag===那个。文件列表。长度){控制台。日志('我上传完成了');};}，错误：函数(错误){ console.log('上传失败');} });}，delImage:函数(){ var即=this$('。img-box ').打开('点击','。'' del-img '，function(){ var delSTatus=confirm('确认这张图片删除吗？');if (delStatus) { var index=$(this).父项()。index()；$(这个)。父项()。移除();那个。文件列表。拼接(索引，1);console.log('我删除啦，索引);};});} } var UploadFunction=new UploadFunction('小明删照片');总结

以上所述是小编给大家介绍的框架实现输入[类型=文件]多图预览上传删除等功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！