Uploading both data and files in one form using Ajax?
The problem I had was using the wrong jQuery identifier.
You can upload data and files with one form using ajax.
PHP + HTML
<?php
print_r($_POST);
print_r($_FILES);
?>
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
jQuery + Ajax
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
Short Version
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});
Sending file together with form data via ajax post
Can you try using FormData()
:
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
The above is a sample code, but you may use it to modify it.
Uploading both data and files in one form using POST method, AJAX and jQuery (Error)
I have already undestood my mistake.
$_FILES
will show me only file data, but if I want to see id_element
I have to use $_POST
.
The result is:
array(1) {
["id_element"]=>
string(1) "1"
}
Ajax file upload more than one input and some data
You can use following javascript code to submit form.
var form = $("#formId")[0];
var data = new FormData(form);
$.ajax({
type: "POST",
url: "form-submit-url",
data: data,
processData: false,
contentType: false,
cache: false,
success: function(data) {}
});
jQuery AJAX multiple files upload but send one file at a time to server using ajax
You can just use forEach method of FormData:
$('#submit-form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
var url = "upload-files.php";
formData.forEach(function(entry) {
if (entry instanceof File) {
var fileForm = new FormData()
fileForm.append('resume', entry)
$.ajax({
url: url,
type: 'post',
data: fileForm,
success: function(response) {
alert(response);
},
cache: false,
contentType: false,
processData: false
})
}
})
})
form data upload multiple files through ajax together with text fields
Here is ajax, html and php global you can access. Let me know if it works for you.
// Updated part
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
// Full Ajax request
$(".update").click(function(e) {
// Stops the form from reloading
e.preventDefault();
$.ajax({
url: 'post_reply.php',
type: 'POST',
contentType:false,
processData: false,
data: function(){
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
data.append('body' , $('#body').val());
data.append('uid', $('#uid').val());
return data;
}(),
success: function(result) {
alert(result);
},
error: function(xhr, result, errorThrown){
alert('Request failed.');
}
});
$('#picture').val('');
$('#body').val('');
});
Updated HTML:
<form enctype="multipart/form-data" method="post">
<input id="file" name="file[]" type="file" multiple/>
<input class="update" type="submit" />
</form>
Now, in PHP, you should be able to access your files:
// i.e.
$_FILES['file-0']
Related Topics
Is There a JavaScript/Jquery Dom Change Listener
How to Add a Delay in a JavaScript Loop
JavaScript Equivalent to Printf/String.Format
Wait Until All Promises Complete Even If Some Rejected
Selecting Text in an Element (Akin to Highlighting With Your Mouse)
Negative Lookbehind Equivalent in JavaScript
Use Basic Authentication With Jquery and Ajax
How to Loop Through a Plain JavaScript Object With the Objects as Members
What's the Meaning of "=≫" (An Arrow Formed from Equals & Greater Than) in JavaScript
Scroll to an Element With Jquery
How to Manage a Redirect Request After a Jquery Ajax Call
What Characters Are Valid For JavaScript Variable Names
Detect When a Browser Receives a File Download
Create and Save a File With JavaScript
Calling Functions With Settimeout()
Chrome/Firefox Console.Log Always Appends a Line Saying 'Undefined'