文件上传事件上下文和 javascript

Question

我需要有条件地打开文件上传对话框：

<input type="file" id="Upload">

基于来自服务器的 Ajax 响应。输入元素是隐藏的，因为我不希望显示默认的丑陋文件文本框和按钮。所以我有另一个元素，用户单击以启动上传。

从用户启动事件上下文的脚本中可以正常工作。

$('#Upload').click();

但是当 Ajax 调用的响应执行它时会失败。现在我知道出于安全考虑，这是 Firefox 和 Chrome 的设计，但在我的情况下，用户启动 ajax 调用，服务器需要决定服务器上的条件当前是否允许上传。如果是这样，我想打开文件上传对话框，否则我需要发布一条消息，说明由于 x 原因不允许该操作（由服务器返回）。

问题在于 Ajax 回调不在用户脚本上下文中，因此打开文件对话框（按设计）的 .click() 未执行。

还有什么办法可以解决这个问题？有没有办法捕获用户事件上下文并将其重用于 Ajax 调用的回调？

Answer 1

要使用 JQuery 制作一个简单的上传器，请使用此代码

HTML

<form id="form" enctype="multipart/form-data">
    <input type="file" id="Upload"></br>
    <div class="progress">
        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
    </div>
    <button type="submit">Start Upload</button>
</form>

您选择您的文件并在您确认上传后点击“开始上传”按钮

jQuery

$('#form').submit(function(){
    var data = new FormData(this);
    $.ajax({
        type: "POST",
        url: URL_TO_UPLOADER,
        data: data,
        contentType: false,
        cache: false,
        processData:false,
        beforeSend: function() {
            $(".progress-bar").width('0%');
        },
        xhr: function() {
            var xhr = new window.XMLHttpRequest();

            // Upload progress
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    $(".progress-bar").width(percentComplete+'%');
                }
            }, false);

            // Download progress
            xhr.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total * 100;
                    $find(".progress-bar").width(percentComplete+'%');
                }
            }, false);
            return xhr;
        },
        success: function(data) {
            alert("Success");
            // File Uploaded
        },
        error: function(xhr, textStatus, errorThrown) {
            alert("Error");
        },
    });
});

PATH_TO_UPLOADER是接收文件的url。