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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多文件上传及回显</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>

.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%;
}
</style>
</head>
<body>
<form>
<div class="picdiv">
<ul class="file-list">
<li class="file-item add">
<div class="file-box">
<input type="file" id="choose-file" class="choose-file" multiple>
</div>
</li>
</ul>
</div>
<div class="btndiv"><a href="javascript:void;" class="upload" id="upload">上传</a></div>

</form>

$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
$('<li class="file-item"><div><img src="' + this.result + '" alt=""><span class="file-del">X</span><div></li>').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;
})
</script>
</body>

</html>

来源：oschina

链接：https://my.oschina.net/u/4161514/blog/3212746

标签

FileBox

Filed

jquery

RED