drag 拖拽上传

最新推荐文章于 2025-09-06 12:42:20 发布

转载最新推荐文章于 2025-09-06 12:42:20 发布 · 1k 阅读

javaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现文件拖拽上传的方法。通过监听dragenter、dragover、dragleave和drop事件来实现文件的拖拽上传功能，并通过CSS修改拖拽区域样式反馈给用户。文章详细展示了如何阻止浏览器的默认行为、处理文件上传及文件格式验证。

`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();
    });