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);
}
});
});
});
Related
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/
I am trying to upload mp3 file to server without using submit button i am using ajax but file not uploading to server.Where i am wrong here is my code
<script>
$(document).ready(function() {
$('#fileToUpload').change(function(){
var file_data = $('#fileToUpload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "modules/phone/newvoicemail.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData:false,
success: function(data){
console.log(data);
}
});
});
});
</script>
In newvoicemail.php i put following code
$src = $_FILES['file']['tmp_name'];
$file_name = $_FILES['fileToUpload']['name'];
$file_size =$_FILES['fileToUpload']['size'];
$file_tmp =$_FILES['fileToUpload']['tmp_name'];
$file_type=$_FILES['fileToUpload']['type'];
move_uploaded_file($file_tmp,"voicemail/".$file_name);
here is my html code
<form name="voicemailform" action="modules/phone/voicemail.php" method="POST" enctype="multipart/form-data" class="form-inline for-frm">
<input type="file" name="fileToUpload" id="fileToUpload">
</form>
Since you are uploading using ajax, you do not need name,action,
method and enctype attributes on your HTML form tag. Same applies to name attribute of file input tag.
You need to add enctype: 'multipart/form-data', to $.ajax({...});
Since you are appending form data with param name file in JS as
form_data.append('file', file_data);, you should access it in php
as $_FILES['file'] and not $_FILES['fileToUpload']
HTML Code:
<form class="form-inline for-frm">
<input type="file" id="fileToUpload">
</form>
JS Code:
$('#fileToUpload').change(function () {
var file_data = $('#fileToUpload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "modules/phone/newvoicemail.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
enctype: 'multipart/form-data',
processData: false,
success: function (data) {
console.log(data);
}
});
});
PHP Code: newvoicemail.php
<?php
$src = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];
move_uploaded_file($src, "./voicemail/".$file_name);
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();
});
Here is mycode
function addPackage(elem)
{
var dataimg = new FormData();
dataimg.append('', $("#browseimg"+elem).prop('files')[0]);
var startdate=$("#from_date"+elem).val();
var enddate=$("#to_date"+elem).val();
$.ajax({
url: "addpackage/",
type:"post",
contentType:false,
data:{startdate:startdate,enddate:enddate,packageid:elem,img:dataimg},
success: function(data) {
}
});
}
I tried post method ajax to upload image and input field data without form. In ajax call it showing [object object]. How to post image with input field without form in jquery ajax?
You can do it like following. Hope this will help you.
function addPackage(elem)
{
var dataimg = new FormData();
dataimg.append('startdate', $("#from_date"+elem).val());
dataimg.append('enddate', $("#to_date"+elem).val());
dataimg.append('packageid', elem);
dataimg.append('img', $("#browseimg"+elem)[0].files[0]);
$.ajax({
url: "addpackage/",
type:"post",
cache : false,
contentType : false,
processType : false,
data: dataimg,
success: function(data) {
}
});
}
You can try this:
Your JS Code:
<script type="text/javascript">
var data = new FormData(document.getElementById("yourFormID")); //your form ID
var url = $("#yourFormID").attr("action"); // action that you mention in form action.
$.ajax({
type: "POST",
url: url,
data: data,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType: "json",
success: function(response)
{
// some code after succes from php
},
beforeSend: function()
{
// some code before request send if required like LOADING....
}
});
</script>
Dummy HTML:
<form method="post" action="addpackage/" id="yourFormID">
<input type="text" name="firstvalue" value="some value">
<input type="text" name="secondvalue" value="some value">
<input type="file" name="imagevalue">
</form>
in addpackage php file:
print_r($_POST);
print_r($_FILES);