通过Ajax将多部分表单数据转发到PHP
问题描述：
I have a form in my HTML. This form takes text inputs and one image:
HTML
<form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
<textarea style="display: none" class="inputNumber" name="pages"></textarea>
<p>Image</p>
<input style="padding: 0px" type="file" name="image">
<p>Subtitle</p>
<input type="text" name="subtitle">
<p>Text</p>
<textarea name="text" rows="4"></textarea>
<input id="properties_btn" type="submit" value="Submit/Update">
</form>
This form will be submitted through Ajax:
jQuery/Ajax
$('body').on('submit', '.article_properties_form', function(e) {
e.preventDefault();
if ($(this).valid()) {
$.ajax({
type: 'POST',
url: '',
data: $(this).serialize(),
success: function() {
}
});
}
});
The data will be relayed to PHP:
PHP
if (isset($_POST["subtitle"], $_POST["pages"], $_POST["text"], $_POST["image"]))
{
//Some SQL
}
The form works successfully when I remove the enctype and the input type="image" property. This means that I must be doing something wrong with the image property. I can't figure out how to relay this form through Ajax to PHP with the image property intact. How can I accomplish this?
答
You need to keep the enctype and to catch the file value, you need to use $_FILES['image'] to get the "image" value.
On the AJAX code, use this:
data: new FormData( this ),
processData: false,
contentType: false
答
Try this :
var fd=new FormData(document.getElementById("YOUR_FORM_ID"));
$.ajax({
type:"POST",
url:"",
data:fd,
enctype:'multipart/form-data',
processData:false,
contentType:false,
success:function(data){console.log(data);},
error:function(err){console.log(err);}
});