Question

我正在尝试使用BlueImp的jQuery File Upload库让我使用AJAX将文件上传到服务器。服务器是返回JSON的自定义应用程序。经过测试，当与文件一起显示时，它会按预期返回一组JSON对象。

但是，当我添加jQuery File Upload并尝试将文件拖放到放置区或仅使用文件上传按钮时，它从不会尝试调用服务器和done函数从未被调用。我添加了fail函数，每次都调用它，但是没有errorThrown和textStatus的{{1}}。我的代码的简化版本如下：

error

将文件拖到放置区的结果始终是：

<!DOCTYPE html>
<html>
<head>
<title>Upload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.dropzone {
    background: #6cc;
    width: 49%;
    height: 200px;
    text-align: center;
    font-weight: bold;
    float: left;
    border: 3px dashed #01608d;
}

.bar {
    height: 18px;
    background: #099;
}
</style>

<!-- Scripts -->
<script src="../static/script/jquery-3.3.1.min.js""></script>
<script src="../static/script/vendor/jquery.ui.widget.js""></script>
<script src="../static/script/jquery.iframe-transport.js""></script>
<script src="../static/script/jquery.fileupload.js""></script>
<script type="text/javascript">

$(function() {
    init();
});

function init()
{

    // configure the fileupload objects
    $('#fileuploadClasslist').fileupload({
        dataType: 'json',
        autoUpload: true,
        dropZone: $("#fileuploadClasslistContainer"),
        fileInput: $("#fileuploadClasslist"),
        progressall: function (e, data) {
            var progress= parseInt(data.loaded / data.total * 100, 10);
            $("#classlistProgress .bar").css('width', progress + '%');      
        },
        drop: function (e, data) {
            $.each(data.files, function (index, file) {
                console.log('Dropped file: ' + file.name);
            });
        },
        done: function (e, data) {
            alert("done!");
            console.log(data.result);
        },
        fail: function (e, data) {
            alert("There was an error:\n" 
                    + "data.errorThrown: " + data.errorThrown + "\n"
                    + "; data.textStatus: " + data.textStatus
            );
        },
    });
} // end function init()
</script>
</head>
<body>

<div id="fileuploadClasslistContainer" class="dropzone">
    Upload a classlist file
    <input type="file" name="fileuploadClasslist" id="fileuploadClasslist" data-url="http://my.server.com/path/process" multiple/>
    <div id="classlistProgress">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

</body>
</html>

非常感谢您的帮助。

jQuery File Upload总是失败，并且不尝试与服务器联系

0 个答案: