jq多选加文件预览_jQuery实现input[type=file]多图预览上传删除等功能

下面我们了解一下，多图上传时，怎么实现预览、上传、删除等功能。下图是功能实现的预览效果，虽然样式有点丑，不过功能还是实现了。话不多说，直接看代码会更直观一些。

首先定义一下基本格式，样式代码自行脑补：

点击上传

接着定义看一下具体的js实现代码，我是基于JQ做的开发，方便DOM的操作。

1. 预览功能的实现

这里监听input[type=file]的change事件，在回调函数中，取到暂存区的文件e.target.files，通过遍历files 文件属性，使用FileReader 函数读取文件的值，然后使用append方法把图片放入指定盒子中。备注：:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。

imgPreview: function () {

var that = this;

$('.upload-header').on('change', '#upload', function(e) {

var files = e.target.files;

if (files.length > 0) {

for (var i = 0; i < files.length; i++) {

var reader = new FileReader();

reader.onload = function () {

var text = `

删除

`

$('.img-box').append(text);

};

reader.readAsDataURL(files[i]);

that.filesList.push(files