jquery 文件上传 触发两次_jquery多文件上传，上传前可回显，多次添加，删除

多文件上传及回显

.file-box {

position: relative;

display: inline-block;

width: 100px;

height: 100px;

background: url('添加相册.png')no-repeat;

background-size: 100px 100px;

}

.choose-file {

width: 100%;

height: 100%;

opacity: 0;

filter: alpha(opacity=0)

}

.file-item {

width: 100px;

height: 100px;

float: left;

margin-left: 10px;

}

.file-item div {

width: 100px;

height: 100px;

vertical-align: middle;

position: relative;

}

.file-item div img {

width: 100px;

height: 100px;

vertical-align: middle;

border-radius: 5px;

}

.file-list .file-item {

float: left;

}

.file-list {

list-style: none;

height: 100px;

}

.file-item .file-del {

color: red;

width: 20px;

height: 20px;

display: block;

background-color: green;

color: white;

text-align: center;

line-height: 20px;

border-radius: 50%;

cursor: pointer;

position: absolute;

right: -10px;

top: -10px;

}

.upload {

width: 80px;

text-align: center;

height: 30px;

line-height: 30px;

color: white;

background-color: green;

font-weight: 600;

border-radius: 5px;

display: block;

position: absolute;

left: 200px;

text-decoration: none

}

.picdiv {

height: 120px;

width: 100%;

}

.btndiv {

height: 300px;

width: 100%;

}

上 传

var $button = $('#upload'),

//选择文件按钮

$file = $("#choose-file"),

//回显的列表

$list = $('.file-list'),

//选择要上传的所有文件

fileList = [],

sendList = [];

//当前选择上传的文件

var curFile;

$file.on('change', function () {

//原生的文件对象，相当于$file.get(0).files[0];

curFile = this.files;

//将FileList对象变成数组

fileList = fileList.concat(Array.from(curFile));

for (var i = 0, len = curFile.length; i < len; i++) {

reviewFile(curFile[i])

}

})

function reviewFile(file) {

//实例化fileReader,

let fd = new FileReader();

//获取当前选择文件的类型

let fileType = file.type;

//调它的readAsDataURL并把原生File对象传给它，

fd.readAsDataURL(file);//base64

//监听它的onload事件，load完读取的结果就在它的result属性里了

fd.onload = function () {

if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {

//$list.append

                    $('

X

').insertBefore($('.add'))

}

}

}

$(".file-list").on('click', '.file-del', function () {

let $parent = $(this).parent().parent();

let index = $parent.index();

fileList.splice(index, 1);

$parent.remove()

});

$button.on('click', function () {

if (fileList.length > 0) {

for (var i = 0, len = fileList.length; i < len; i++) {

let formData = new FormData();

formData.append('file', fileList[i]);

$.ajax({

url: '/oss/file/uploadFiles',

type: 'post',

data: formData,

processData: false,

contentType: false,

success: function (data, statusText, headers) {

if (data.success) {

var filed = data.data[0];

sendList.push(filed);

}

}

})

}

} else {

alert("请选择文件！")

}

return false;

})