How to send file with other data via ajax?

Good evening, has the form:
<form method="post" id="prov" action="">
 <div class="input-wrapper">
 <input type="hidden" name="provid" value="12">
 <input id="provmsg" type="text" name="provmsg">
 <label for="provimg"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
 <input id="provimg" type="file" name="provimg">
</div>
</form>
<button onclick="prov();" class="send">send</button>

She sent:
function prov() {
 var data = $('#prov').serialize();
 $.post("/engine/prov.php", data, function(r) {
 if(r.status == 'success') {
 if(typeof(r.msg) != 'undefined') {
 noti(r.status, r.msg);
}}
 else if(r.status == 'error') {
noti(r.status, r.msg);
}
 }, "json");
 return false;
}

How to send a file with all the data?
April 4th 20 at 00:46
1 answer
April 4th 20 at 00:48
Solution
var formData = new FormData($('#prov').get(0)); // create a new instance of the object and extend to him our form
$.ajax({
 url: "/engine/prov.php",
 type: "POST",
 contentType: false, // important - remove the formatting of the default data
 processData: false, // important - remove the string conversion default
 data: formData,
 success: function(json) {
 if (json) {
 // here do something with the result
}
}
});
TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
By the way, as it gets the data from the form? it's not specified anywhere - Dimitri commented on April 4th 20 at 00:51
In the original it was:
$('#my_form').on('submit', function(e){
e.preventDefault();
 var $that = $(this) ...

So instead of this, you need to substitute $('#prov'), that is:
var formData = new FormData($('#prov').get(0)); - Irma.Schmeler commented on April 4th 20 at 00:54
@Irma.Schmeler, for some reason does not work, no error( - Dimitri commented on April 4th 20 at 00:57
@Irma.Schmeler,
function prov() { 
 var formData = new FormData($('#prov').get(0));
$.ajax({
 url: "/engine/prov.php",
 contentType: false, // important - remove the formatting of the default data
 processData: false, // important - remove the string conversion default
 data: formData,
 success: function(r) {
 if(r.status == 'success') {
 if(typeof(r.msg) != 'undefined') {
 noti(r.status, r.msg);
}}
 else if(r.status == 'error') {
noti(r.status, r.msg);
}
}
});
 return false;
}

Correctly I made? - Dimitri commented on April 4th 20 at 01:00
5e10d5690eb51035547502.png
The main file

<form method="post" id="prov" enctype="multipart/form-data">
 <div class="input-wrapper">
 <input type="hidden" name="provid" value="12">
 <input id="provmsg" type="text" name="provmsg">
 <label for="provimg"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
 <input id="provimg" type="file" name="provimg">
</div>
</form>
<button onclick="prov();" class="send">send</button>

<script type="text/javascript">
 function prov() {
 var formData = new FormData($('#prov').get(0));
$.ajax({
 type: 'POST', // method of transmission
 dataType: 'json', // type of data expected in response
 url: "test_ajax.php",
 contentType: false, // important - remove the formatting of the default data
 processData: false, // important - remove the string conversion default
 data: formData,
 success: function(r) {
console.log(r);
},
 error: function(r){
console.log('Error');
console.log(r);
}
});
 return false;
}
</script>


File test_ajax.php

$text = $_POST["provmsg"];
echo json_encode("success from test_ajax! text = $text");

- Irma.Schmeler commented on April 4th 20 at 01:03

Find more questions by tags AJAXjQuery