多图上传type=[file]可拖拽排序

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