当尝试使用AJAX上传图像而不直接提交表单并将FormData对象发送到服务器时，它将返回空$_FILES数组。但是，如果我使用<input type="submit">标签$_FILES数组提交表单，则该字段不为空并且接收数据。
的HTML
<form action="core/update.php" method="post" enctype="multipart/form-data" id="profile-photo" name="profile-photo-form">
<input type="file" id="photo-filename" name="avatar" class="edit-show panel photo-upload">
</form>
<button class="save-button" disabled="disabled">Save</button>
JS
$('#profile-photo').on('submit', function(e) {
e.preventDefault();
var form = $('#profile-photo')[0];
var formData = new FormData(form);
formData.append('avatar', $('#photo-filename')[0].files[0]);
$.ajax({
url: "core/update.php",
data: formData,
type: "POST",
contentType: false,
cache: false,
processData: false
});
console.log(formData);
});
$('.save-button').on('click', function() {
if ($('#photo-filename').val != '') {
$('#profile-photo').submit();
};
}
UPD
还$('#profile-photo').serialize()返回空白字符串。
UPD 2
它可以与页面上的其他AJAX请求冲突吗？
尝试这个：
因为用户可能会上传多个文件
jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
data.append('file-'+i, file);
});
代替
formData.append('avatar', $('#photo-filename')[0].files[0]);
完整的解决方案：
$('#profile-photo').on('submit', function(e) {
e.preventDefault();
var form = $('#profile-photo')[0];
var formData = new FormData(form);
jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
formData.append('file-'+i, file);
});
$.ajax({
url: "core/update.php",
data: formData,
type: "POST",
contentType: false,
cache: false,
processData: false
});
console.log(formData);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句