drag檔案拖拽上傳

drag阻止預設事件

  //拖拽檔案上傳預設事件阻止
    $(document).on({
        dragleave:function(e){
            e.preventDefault();
        },
        drop:function(e){
            e.preventDefault();
        },
        dragenter:function(e){
            e.preventDefault();
        },
        dragover:function(e){
            e.preventDefault();
        }

    });
 

### drag拖拽樣式改變

 var drop_zone = document.getElementById("drop_area");
     //檔案拖拽上傳事件
    drop_zone.addEventListener("drop",function (event) {
        //拖拽結束後的樣式
        $("#drop_area").css('border','5px dashed #ccc');
        //獲取拖拽上傳檔案
        var files = event.dataTransfer.files;
        //檔案上傳處理函式
        formHandler(files);
    });
    window.addEventListener("dragover", function( event ) {
        $("#drop_area").css('border','5px dashed #00C0EF');

    }, false);
    window.addEventListener("dragleave", function( event ) {
        $("#drop_area").css('border','5px dashed #ccc');

    }, false);

    document.getElementById('drop_area').addEventListener('dragover',function (event) {
        //阻止預設事件
        event.preventDefault();
        $("#drop_area").css('border','5px solid #00C0EF');
        //阻止事件冒泡
        event.stopPropagation();
    },false);
 

檔案上傳處理函式

function formHandler(fileList) {
        formDataInit();
        fileRender(fileList);
        fileCount();
    }
        //表單物件初始化
        var allFile = [];
        var form = document.getElementById("upload-form");
        var formData = new FormData(form);
        function formDataInit() {
            var norm = $("#norm").val();
            var major = $("#major").val();
            var type = $("#type").val();
            formData.set("norm",norm);
            formData.set("major",major);
            formData.set("type",type);
        }
//檔案列表渲染
    function fileRender(fileList) {
        var fileError = 0;
        $.each(fileList, function (index, item) {
            var fileName = item.name;
            var fileEnd = fileName.substring(fileName.indexOf("."));
            //判斷上傳檔案格式
            if (fileEnd == ".xlsx") {

                $("#fileUpload").css('display','inline');
                $("#fileDelete").css('display','inline');
                //將檔案加入allFile中
                allFile.push(item);

                $('#files').append( '<tr style="padding-top: 7px;">' +
                    '<td>'+fileName+'</td>' +
                    '<td>'+(item.size / 1024).toFixed(2)+'K</td>' +
                    '<td><input type="button" class="btn btn-danger delete" value="取消"></td>' +
                    '</tr>');
                formData.append('UploadForm[excelFiles][]',item);
            } else {
                fileError++;
            }
        });
        if (fileError > 0) {
            alert("只能上傳 “.xlsx” 格式的檔案!");
        }
    }
    //檔案計數
    function fileCount() {
        var fileCount = $('#files').find('tr').length;
        if(fileCount > 0){
            $('#fileName').html('共上傳 ' + fileCount + ' 個檔案');
        }else {
            $('#fileName').html('您還沒有選擇檔案哦！');
            $("#fileUpload").css("display","none");
            $("#fileDelete").css("display","none");
        }
    }
 

檔案取消上傳事件

 $('#files').on('click','.delete',function (e) {
        var saveFile = [];
        var deleteName = e.target.parentNode.previousElementSibling.previousElementSibling.textContent;
        var deleteIn;
        $.each(allFile,function (index, item) {
            if(item.name == deleteName){
                deleteIn = index;
            }else {
                saveFile.push(item);
            }
        });
        allFile.splice(deleteIn,1);
        //表單資料重置
        formData.delete('UploadForm[excelFiles][]');

        $.each(saveFile,function (index, item) {
            formData.append('UploadForm[excelFiles][]',item);
        });

        e.target.parentNode.parentNode.remove();
        fileCount();
    });