I am trying to send both an image file and a array via my AJAX request to my PHP script, but either the array or the image file dosen't show up. I have located the problem being the lines, that you have to add to your AJAX when you are dealing with files.
contentType: false,
processData: false,
If these two lines are added the array arrives at PHP script empty. What can I do differently? :)
My AJAX:
$('#createMember').on('submit', function(event){
event.preventDefault();
$("#LoadingIcon").show();
var form_data = $(this).serialize();
$.ajax({
url:"scripts/createMember.php",
method:"POST",
data:form_data,
cache: false,
contentType: false,
processData: false,
success:function(data)
{
$.notify({
title: '<strong>Created!</strong><br>',
message: 'Member is now created!'
});
$("#LoadingIcon").fadeOut(200);
});
});
My HTML
<form method="post" id="opretMedlem" enctype="multipart/form-data">
<input type="text" name="info[name]" class="form-control1 info" />
<input type="text" name="info[age]" class="form-control1 info" />
<input type="file" name="info[image]" class="form-control1 info" />
<input type="submit" name="submit" class="btn btn-info" value="Create member" />
</form>
You have forgot to use enctype in ajax request. Also try to use FormData() constructor instead of serializing the data.
$('#opretMedlem').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
var form = $(this)[0];
var data = new FormData(form);
$.ajax({
url:"scripts/createMember.php",
enctype: 'multipart/form-data',
method:"POST",
data:data,
cache: false,
contentType: false,
processData: false,
success:function(data) {
alert('done');
}
});
});
Look at the fiddle: https://jsfiddle.net/up8zavtb/
Related
I am trying to send a file to my DB together with text using this:
let formData = new FormData($('#image_form')[0]);
formData.append("message", $('#messageInput').val());
$(document).ready(function() {
$('#image_form').submit(function(e) {
e.preventDefault();
$.ajax({
url: "https://example.com/test.php",
type: "POST",
data: new FormData(this),
contentType: false,
processData:false,
success: function(status) {
$('#result').append(status);
}
});
});
});
That's the DOM
<form id="image_form" enctype="multipart/form-data">
<input type="file" name="files[]" id="files[]" multiple >
<input type="submit" name="submit" is="submit" id="submit"/>
</form>
<input type="text" name="message" id="messageInput">
PHP:
<?php
$file = $_FILES['files'];
$message = $_POST['message'];
var_dump($_POST);
?>
The Image is received by php and can be display. But the Text is not.
Besides the Image, the php script outputs:
array(1) { ["submit"]=> string(6) "Submit" }
You need to assign formData inside the submit handler, so it gets the values after the user has submitted the form.
$(document).ready(function() {
$('#image_form').submit(function(e) {
e.preventDefault();
let formData = new FormData($('#image_form')[0]);
formData.append("message", $('#messageInput').val());
$.ajax({
url: "https://example.com/test.php",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(status) {
$('#result').append(status);
}
});
});
});
I am trying to send an image to a server but I always get the following error:
Uncaught TypeError: Cannot read property '0' of undefined
Here is my code:
HTML
<form id="form1">
<input id="image" name="image" type="file"/>
<input id="btnSave" name='btnSave' type="button" value="Save"/>
</form>
JavaScript
$('#btnSave').click(function() {
var fd = new FormData();
fd.append( 'file', $("#image").files[0] );
$.ajax({
url: 'img.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
},
error: function(data){
alert(data);
}
});
}
I have tested similar forms with the same image that I am using to test this code, also I don't want to submit the form yet with this code.
A jQuery object does not have the files collection. You need to access the underlying input element like this:
fd.append('file', $("#image")[0].files[0]);
That said, I'd suggest changing the button to a type="submit" and hooking the handler to the submit event of the form. Then you can just pass the form element to the FormData constructor, like this:
<form id="form1">
<input id="image" name="image" type="file"/>
<input id="btnSave" name='btnSave' type="submit" value="Save"/>
</form>
$('#form1').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'img.php',
data: new FormData(this),
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
},
error: function(data){
alert(data);
}
});
}
I'm having trouble getting an ajax-loaded form (#ajaxLoadedForm) to submit via ajax. The formData object gathers no data. I figure I've got to attach an event-handler to the form so the DOM recognizes it, but I can't figure out how.
A couple of notes: I'm bypassing the 'submit' method and using a button (#button), so I can't attach the handler to that. The form itself is a sibling to #button, not a child.
<form id="ajaxLoadedForm" enctype="multipart/form-data" action="destination.php" method="POST">
<input type="hidden" name="state" value="1" />
<label for="fullname">Your Full Name</label>
<input type="text" id="name" autocapitalize="off" autocorrect="off" name="fullname" placeholder="your name" value="" />
</form>
<div id="button">Submit me!</div>
$('#button').click(function(){
var uploadData = new FormData($("#ajaxLoadedForm")[0]);
jQuery.ajax({
url: 'destination.php',
data: uploadData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
data = JSON.parse(data);
if (data['pass'] == false) {
console.log('fail');
} else {
console.log('success');
}
}
});
});
Try using the submit handler on the form itself
$('#ajaxLoadedForm').submit(function(e){
e.preventDefault();
var uploadData = new FormData(this);
});
Then make your button for submit a submit type
<button type='submit'>Submit</button>
In your php side, test the data coming by doing this:
print_r($_POST);
you can use serialize function for sending form data . Like below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$('#button').click(function(){
var uploadData = $('#ajaxLoadedForm').serialize();
jQuery.ajax({
url: 'destination.php',
data: uploadData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
data = JSON.parse(data);
if (data['pass'] == false) {
console.log('fail');
} else {
console.log('success');
}
}
});
});
</script>
Try below code..
$('#button').click(function(){
var uploadData = new FormData();
uploadData.append('fullName',$('#fullName').val());
jQuery.ajax({
url: 'destination.php',
data: uploadData,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
}
});
});
And try to access full name in php
I am working on jquery dialog email attachment. I created a separate form to upload file that uses formdata object. I want to reuse the form and its related ajax call in different dialogs in the same php page(reason: need email attachment functionality in other dialogs). How can i achieve this?
Jquery Ajax call:
$('#attchform').submit(function(event) {
$.ajax({
url: 'uploadfile.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
document.getElementById("fileToUpload").disabled = true;
$("#loadimg").html(data);
}
});
event.preventDefault();
});
Html form:
<form id="attchform" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Attach" name="submit">
</form>
<div id="loadimg"></div>
You can define a function and call any where in the same page:
function UploadFile(){
$.ajax({
url: 'uploadfile.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
document.getElementById("fileToUpload").disabled = true;
$("#loadimg").html(data);
}
});
}
$('#attchform').submit(function(event) {
UploadFile();
event.preventDefault();
});
I need to upload multiple files from a form. I have an event "submit" that processes the data of the form, uploads the files and then shows a message. I need that this process syncronous to show the message when the files have been uploaded.
I have this HTML code in the form:
<form method="post" action="files/upload_project_file" id="upload_project_file_form" target="upload_project_file_iframe" enctype="multipart/form-data">
<input type="file" name="uploaded_file[]" class="multi" maxlength="0" accept="" />
<input type="hidden" name="action" value="upload_project_file">
<input type="hidden" name="id_project_files" value="" id="id_project_files">
</form>
And this Javascript code in the javascript Submit event:
//processes data
//...
//Upload files
var data = new FormData();
jQuery.each($('input[name^="uploaded_file"]')[0].files, function(i, file) {
data.append('uploaded_file'+i, file);
});
data.append('id_project_files', $("#id_project_files").val());
$.ajax({
url: 'files/upload_project_file',
enctype: 'multipart/form-data',
data: data,
cache: false,
contentType: false,
processData: false,
async: false,
type: 'POST',
success: function(data){
//Clear
$('.filesToUpload').empty();
}
});
//Then show the message and redirect page
//...
I upload only one file but not all, I can't, I don't know why. I've seen Jquery.each runs only once.
No, thanks "user2698878", I didn't want to use Uploadify.
Finally I changed the ajax code and it works perfectly. This is the new code:
var formData1 = new FormData($("#upload_project_file_form")[0]);
$.ajax({
url: "files/upload_project_file",
enctype: 'multipart/form-data',
type: 'POST',
data: formData1,
async: false,
success: function (data) {
$('.filesToUpload').empty();
},
cache: false,
contentType: false,
processData: false
});