使用 jquery 上传文件不适用于 Edge 和 Safari (v. 11.1)

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)

Upload file using jquery not working for Edge and Safari (v. 11.1)

safari

jquery

file-upload

jquery-file-upload

microsoft-edge