这似乎是一个简单的问题,但现在我已经在这个问题上伤透脑筋了。
我有一个表单,它接受用户使用ajax提交到服务器的文件。我面临的问题是 $(this).serialize()
,它总是返回一个空字符串。我已经为输入字段定义了名称属性。功能似乎也是正确的,任何人都可以指出我是否遗漏了什么!
已经有很多类似的问题了,但大多数答案都说它需要已经存在的名称属性。
表格:
<form action="/upload" name="upload_form" method="POST" id="upload-form">
<input type="file" name="file" value=""/><br />
<input type="submit" name="submit" value="Upload"/>
<input type="reset" name="clear" value="Clear"/>
</form>
脚本
$(document).ready(function () {
$('#upload-form').on('submit', function(e) {
e.preventDefault();
console.log($(this).serialize());
$.ajax({
url : $(this).attr('action'),
type: "POST",
data: $(this).serialize(),
success: function (data) {
console.log(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
最佳答案
在处理文件上传时包含 enctype="multipart/form-data"
。使用ajax时,可以调用并使用FormData
对象。所以事情会是这样的。
var formFile = new FormData();
formFile.append('file',$( '#id_of_fileinput' )[0].files[0] );
$.ajax({
url: path_to_php,
type:"POST",
data: formFile,
dataType: "json",
processData: false, //important to include when uploading file
contentType: false, //important to include when uploading file
beforeSend: function(){
$('.loading').show();
$('.masked').show();
},
success: function(data){
//do something with data
console.log(data);
$('.loading').hide();
$('.masked').hide();
}
});
关于即使为表单元素定义了 name 属性,JQuery form.serialize() 也会返回空字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36783498/