Question

我输入了用户可以拖放的文件，上传并单击发送后，它们将被上传到Blob

<input type="file" id="selectFile" name="MultipleFiles" multiple>
<script>
    $(document).ready(function() {
        $("#selectFiles").dragAndDropPZ({
            fileInputId: "#selectFile"
        });
    });
</script>

当用户删除一些文件脚本时，脚本就起作用并使用此功能

(function ($, window, document) {

var defaults = {
    fileInputId: "input[type='file']",
    dragoverStyleClass: "stripped"
};

$.fn.dragAndDropPZ = function (options) {
    var config = $.extend({}, defaults, options);
    var $dropZone = $(this);
    var dropZoneId = $dropZone.selector;

    $(document).on("dragover", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        $dropZone.addClass(config.dragoverStyleClass);
        console.log("dropzone => dragover");
    });

    $(document).on("dragleave", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        $dropZone.removeClass(config.dragoverStyleClass);
        console.log("dropzone => dragleave");
    });

    $(document).on("drop", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        var droppedFiles = e.originalEvent.dataTransfer.files; //[0] - ?
        $(config.fileInputId).prop("files", droppedFiles);
        $dropZone.removeClass(config.dragoverStyleClass);
        console.log("dropzone => ondrop");
    });

    return $dropZone;
};
})(jQuery, window, document);

这是我上传文件的ajax函数

    function uploadMultipleStageFiles() {
    var formData = new FormData($("#contentStages form")[0]);
    var funcStatus;
    $.ajax({
        url: "@Url.Action("AddFiles", "Groups")",
        data: formData,
        type: 'post',
        async: false,
        processData: false,
        contentType: false,
        success: function (data) {
            funcStatus = data.status;
            if (data.status === "success") {
                removeSpiner();
                appendAttachedFiles(data.Files);
                updateRadioButtonOfFiles(); 
                console.log("FileUpload - success");
                return true;
            } else if (data.status === "error") {
                removeSpiner();
                alert(data.message);
                return false;
            }
            return false;
        },
        error: function () {
            console.log("FileUpload - error");
        }
    });
    if (funcStatus === "success") {
        return true;
    } else {
        return false;
    }
}

此代码适用于Edge和Safari 11.1版以外的所有浏览器。也许有人遇到过这样的问题，并且已经解决了？

Answer 1

我找到了Safari的解决方案

function uploadMultipleStageFiles() {
    var $form = $('form');
    var $inputs = $('input[type="file"]:not([disabled])', $form);
    $inputs.each(function(_, input) {
        if (input.files.length > 0) return;
        $(input).prop('disabled', true);
    });
    var formData = new FormData($("#contentStages form")[0]);
    $inputs.prop('disabled', false);
 $.ajax({

但是目前，这不适用于Edge。修边

使用jquery上传文件不适用于Edge和Safari（v。11.1）

1 个答案: