使用formData上传jQuery文件不起作用 [英] jquery file upload using formData not working
问题描述
我正在尝试使用jquery上传tar文件的简单文件.但是我从服务器获取了无效的存档格式.任何帮助将不胜感激.
I am trying a simple file upload of a tar file using jquery. But I get an Invalid archive format from my server. Any help would be appreciated.
PS:我无法更改服务器代码.它来自另一个团队.
PS: I cannot change the server code. It comes from another team.
chrome的回复: 我的HTML:
Edit 1: Response from chrome: My HTML:
<!DOCTYPE html>
<html>
<body>
<form method="POST" enctype="multipart/form-data" id="testFileUpload">
<input type="file" name="selectedFile"/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
</body>
</html>
我的JS:
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
event.preventDefault();
var form = $('#testFileUpload')[0];
var data = new FormData(form);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: g_url_version+'/hosting/apps',
data: data,
processData: false,
contentType: false,
timeout: 600000,
beforeSend: function (xhr) {
xhr.setRequestHeader('X-Token-Id', getCookieToken());
xhr.setRequestHeader('X-Connector-Id', 'TestSeed');
},
success: function (data) {
console.log("SUCCESS : ", data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
});
});
我可以使用邮递员通过Binary上传文件，如下所示，但不能通过formData上传.
I can upload the file using postman via Binary as shown below but not via formData.
推荐答案
绑定提交事件处理程序，而不是单击按钮，因为您需要防止 默认表单提交并发送手动ajax调用
Bind the submit event handler rather than click on the button as you need to prevent the default form submission and send manual ajax call
$("#btnSubmit").click(function (event) {
到
$("#testFileUpload").on('submit', function(event) {
并简单地使用this在其中获取表单对象
and simply use this to get the form object inside it
var form = this;
复制下面的代码，如果您使用
copy the code below it should upload the file correctly if you have a simple php file with
print_r($_POST);
print_r($_FILES);
它应该在控制台中显示以下内容
it should show the below in the console
SUCCESS : Array
(
[userid] => oemr@omer.com
[filelabel] =>
)
Array
(
[file] => Array
(
[name] => IMG_20160521_092941676.jpg
[type] => image/jpeg
[tmp_name] => F:\xampp\tmp\phpD881.tmp
[error] => 0
[size] => 4867779
)
)
$(document).ready(function() {
$("#testFileUpload").on('submit', function(event) {
event.preventDefault();
var form = this;
var data = new FormData(form);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: g_url_version + '/hosting/apps',
data: data,
processData: false,
contentType: false,
timeout: 600000,
beforeSend: function(xhr) {
xhr.setRequestHeader('X-Token-Id', getCookieToken());
xhr.setRequestHeader('X-Connector-Id', 'TestSeed');
},
success: function(data) {
console.log("SUCCESS : ", data);
},
error: function(e) {
console.log("ERROR : ", e);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data" id="testFileUpload">
<input type="file" name="selectedFile" />
<input type="submit" value="Submit" id="btnSubmit" />
</form>
这篇关于使用formData上传jQuery文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
