拖放上传文件验证JQuery答案

【问题标题】：Drag & Drop upload file validation JQuery拖放上传文件验证JQuery
【发布时间】：2018-02-11 07:31:55
【问题描述】：

我可以拖放文件，然后通过 RESTful 接口将数据发送到服务器端应用程序。

但是，我想在数据一路前验证客户端的文件...

我知道 droppeable 有一个名为 .accept 的东西，但我无法让它工作。

如果可以检查文件是否具有 .CSV 扩展名，我会很高兴，但如果我可以检查文件是否为真正的 .CSV 文件，我也可以触摸天空

这是我的代码：

<script>
    $(document).ready(function () {

        $("#progress").hide();

        $("#fileBasket").on("dragenter", function (evt) {
            evt.preventDefault();
            evt.stopPropagation();
        });

        $("#fileBasket").on("dragover", function (evt) {
            evt.preventDefault();
            evt.stopPropagation();
        });

        $("#fileBasket").on("drop", function (evt) {
            evt.preventDefault();
            evt.stopPropagation();

            });
    });

    $("#fileBasket").on("drop", function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        var files = evt.originalEvent.dataTransfer.files;
        var fileNames = "";

        if (files.length > 0 && files.length <2) {
            fileNames += "Uploading <br/>"
            for (var i = 0; i < files.length; i++) {
                fileNames += files[i].name + "<br />";
            }
        }


        $("#fileBasket").html(fileNames)

        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
            data.append(files[i].name, files[i]);
        }



        $.ajax({
            type: "POST",
            url: "http://localhost:25516/api/Sales/uploadFile",
            contentType: false,
            processData: false,
            data: data,
            success: function (message) {
                $("#fileBasket").html(message);
            },
            error: function () {
                $("#fileBasket").html("There was error uploading files!");
            },
            beforeSend: function () {
                $("#progress").show();
            },
            complete: function () {
                $("#progress").hide();
            }
        });
    });

</script>

【问题讨论】：

注意$("#fileBasket").on("dragenter", function (evt) { evt.preventDefault(); evt.stopPropagation(); }); $("#fileBasket").on("dragover", function (evt) { evt.preventDefault(); evt.stopPropagation(); }); $("#fileBasket").on("drop", function (evt) { evt.preventDefault(); evt.stopPropagation(); }); 可能是$("#fileBasket").on("drop dragenter dragover", function (evt) { evt.preventDefault(); evt.stopPropagation(); });
尝试使用正则表达式修剪最后一个点之前的所有内容var extension = filename.replace(/^.*\./, '');
stackoverflow.com/a/14852740/125981
真的很酷，它奏效了。干杯

标签： javascript jquery csv

【解决方案1】：

注意

$("#fileBasket").on("dragenter", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
});
$("#fileBasket").on("dragover", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
});
$("#fileBasket").on("drop", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
});

可能是

$("#fileBasket").on("drop dragenter dragover", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
});

尝试使用正则表达式修剪最后一个点之前的所有内容

var extension = filename.replace(/^.*\./, '');

【讨论】：