html结构
<div class="uploaderWrap">
<div class="fileHead file_con">
<input type="file" name="uploadFile" id="m_upload" multiple="multiple"><!--限制上传个数-->
<span class="file_uploader">上传文件</span>
<span class="file_uploader">确定上传</span>
</div>
<div class="m_img_holder item_container">
<div class="item_content"><ul class="clearfix"></ul></div>
</div>
</div>
JS部分
function uploadImgs(fn,url,durl,token,path) {
var file = {
m_upload: function (e) {
var m_file = e.target.files;
//file里面存放有文件的名字(name)、格式(type)、大小(size)、上传时间(time)等等
var name = '', div = '', image = '';
var oArr = [], resultArr = [], lastArr = [];
for (var i = 0; i < m_file.length; i++) {
var z = m_file[i];
// var type = z.type.split('/')[0];
// if (type !='image') {
// alert('请上传图片');
// return;
// }
var reader = new FileReader();//这里可能会有坑
reader.readAsDataURL(z);
// reader.onprogress = (function (e) {
// });
reader.onload = function(e){
$.ajax({
url: url,
data: {'file':e.target.result,'name':z.name,'path':path},
success: function (response) {
var imginput = '<input type=hidden class=imgs value='+response+'>';
$(".submit-btn div").append(imginput);
}
});
};
reader.onloadend = (function (i) {
var param = { name: i.name, url: '' }
//上传成功
return function () {
//console.log(i);
var dataURL = this.result,
status = true;
param.url = dataURL;
oArr.push(param);
image = '<img draggable="true" src="' + this.result + '"/>';
var imglist = '<li><div class="item" data-name="' + param.name + '"><div class="img_box drag-area">' + image + '</div></div><span class="delete">删除</span></li>';
$(".item_content ul").append(imglist);
//拖拽文件
$('.item_content ul li').arrangeable({ dragSelector: '.drag-area' });
//删除文件
deletFile(token, durl,path);
};
})(z);
fn(oArr);
};
},
event: function () {
$("#m_upload").change(function (e) {
file.m_upload(e);
});
},
init: function () {
this.event();
}
}
file.init();
}
function deletFile(token,durl,path){
$("li").on(".delete", "click", function () {
var o = $(this);
o.parents("li").remove();
var name = o.parents("li").find("img").attr("alt");
if(name){
$.ajax({
url: durl,
data: { 'name': name,'path':path},
success: function (response) {
}
});
}
$("#m_upload").val('');
});
}
引入拖拽js转载
https://blog.csdn.net/qq_25236657/article/details/80134996