在Javascript中使用POST上传zip文件会无声地失败 [英] Uploading a zip file using POST in Javascript fails silently
问题描述
我正在开发一个Web应用程序(使用JQuery 2.2.4版),允许用户将图像和数据提交给我们的服务器。当用户决定上传他们的提交时,我的代码应使用JSZip库生成一个zip文件,并使用POST将其上传到我们的服务器。在StackExchange上搜索了一下之后,我想出了这个代码:
I am working on a web application (using JQuery version 2.2.4) that allows users to submit images and data to our server. When users decide to upload their submissions, my code should generate a zip file using the JSZip library and upload it to our server using POST. After some searching here on StackExchange, I came up with this code:
var zip = new JSZip(); // Create the object representing the zip file
// ...Add the data and images
console.log('Generating compressed archive...');
zip.generateAsync({
compression: 'DEFLATE',
type: 'blob'
}).then(function(zc) {// Function called when the generation is complete
console.log('Compression complete!');
// Create file object to upload
var fileObj = new File([zc], fileName);
console.log('File object created:', fileObj);
$.post('http://myurl/submit', {
data: fileObj,
}).done(function() {
console.log('Ajax post successful.');
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log('Ajax post failed. Status:', textStatus);
console.log(errorThrown);
});
});
我的代码打印 File对象创建消息,文件对象本身看起来好的,但我什么也没得到。沉默的失败。 POST调用甚至没有出现在Firebug的Net面板中。
My code prints the File object created message, the file object itself looks OK, but then I get nothing else. A silent failure. The POST call does not even appear in the Net panel for Firebug.
经过更多搜索后,我还尝试事先添加此代码:
After more searching, I also tried to add this code beforehand:
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
console.log('Ajax post failed. Event:', event);
console.log('Ajax settings:', settings);
console.log(thrownError);
});
但这不会被触发。显然我在设置错误回调时会出现一些错误 - 我可以尝试一下吗?
But that doesn't get triggered. There's clearly some error I am making in setting up the callbacks for errors - what could I try?
推荐答案
我设法得到了上传工作创建一个FormData对象并将我的文件粘贴到它。以下是代码:
I have managed to get the upload to work creating a FormData object and sticking my file into it. Here is the code:
var zip = new JSZip(); // Create the object representing the zip file
// ...Add the data and images
console.log('Generating compressed archive...');
zip.generateAsync({
compression: 'DEFLATE',
type: 'blob'
}).then(function(zc) {// Function called when the generation is complete
console.log('Compression complete!');
// Create file object to upload
var fileObj = new File([zc], fileName);
console.log('File object created:', fileObj);
var fd = new FormData();
fd.append('fileName', fileName);
fd.append('file', fileObj);
fd.append('mimeType', 'application/zip');
// POST Ajax call
$.ajax({
type: 'POST',
url: 'http://myurl/submit',
data: fd,
contentType: false,
processData: false,
}).done(function() {
console.log('Ajax post successful.');
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log('Ajax post failed. Status:', textStatus);
console.log(jqXHR);
console.log(errorThrown);
});
});
这是受David Duponchel链接的其他StackExchange答案的启发。
This was inspired by the other StackExchange answers linked to by David Duponchel.
这篇关于在Javascript中使用POST上传zip文件会无声地失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!