Я пытаюсь использовать библиотеку загрузки файлов jQuery от BlueImp, чтобы позволить мне загружать файлы на сервер с AJAX.Сервер представляет собой пользовательское приложение, которое возвращает JSON.Это было протестировано и возвращает набор объектов JSON, как и ожидалось, при представлении с файлом.
Однако, когда я добавляю jQuery File Upload и пытаюсь либо перетащить файл в рабочую зону, либо простоиспользуйте кнопку загрузки файла, она никогда не будет пытаться вызвать сервер, а функция done никогда не вызывается.Я добавил функцию fail, и она вызывается каждый раз, но без errorThrown и textStatus из 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>
Результат перетаскивания файла в зону сброса всегда:
There was an error:
data.errorThrown:
; data.textStatus: error
Любая помощь очень ценится.