jquery 文件上传 触发两次_jquery多文件上传,上传前可回显,多次添加,删除
上传var $button = $('#upload'),//选择文件按钮$file = $("#choose-file"),//回显的列表$list = $('.file-list'),//选择要上传的所有文件fileList = [],sendList = [];//当前选择上传的文件var curFile;$file.on('change', function () {alert('xx')
var $button = $('#upload'),
//选择文件按钮
$file = $("#choose-file"),
//回显的列表
$list = $('.file-list'),
//选择要上传的所有文件
fileList = [],
sendList = [];
//当前选择上传的文件
var curFile;
$file.on('change', function () {
alert('xx')
//原生的文件对象,相当于$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('
} else {
$list.append('
' + file.name + '删除')}
}
}
$(".file-list").on('click', '.file-del', function () {
let $parent = $(this).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;
})
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)