Question

我能够拖放文件，然后通过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>

Answer 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(/^.*\./, '');

拖拽删除上传文件验证JQuery

1 个答案: