I have this form:
<form id="ugaForm" method="POST" action="/url/upload" target="myFrame"
enctype="multipart/form-data">
Please select a file to upload : <input id="file" type="file" name="file" />
<input type="button" onclick="submitF()" value="upload" />
</form>
when submitting normally it works perfectly.
I need an ajax post to imitate this exact form submission.
This code doesnt work:
function submitF() {
debugger;
var mfile = $("form#ugaForm")[0].file;
var fd = new FormData();
fd.append( 'file', mfile);
$.ajax({
url: 'http://localhost/url/upload/',
data: JSON.stringify({ 'objectData' : fd}),
cache: false,
contentType : false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
If you are submitting something through AJAX then why are you putting it into the form. Just remove the form and keep the other things which were inside it so that it would become like this:
<div id="ugaForm">
Please select a file to upload : <input id="file" type="file" name="file" />
<input type="button" onclick="submit()" value="upload" />
</div>
And the JS would be this:
function submitF() {
debugger;
var mfile = $("#ugaForm")[0].file;
var fd = new FormData();
fd.append('file', mfile);
$.ajax({
url: 'http://localhost/url/upload/',
data: JSON.stringify({
'objectData': fd
}),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
alert(data);
}
});
}
Hope it helps.
Related
I have form:
<form enctype="multipart/form-data" action="" method="post" id="sendInvoiceForm">
<input type="text" value="Some text">
<input name="file[]" type="file" multiple/>
<input type="button" id="upload" value="Upload File" />
</form>
My js:
$('#upload').click(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('files',$("#sendInvoiceForm")[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function (data) {
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
});
When I try to get my 'files' in php I get only [object HTMLFormElement]
How can I get my files on php?
But if I create my formData as :var formData = new FormData($("#sendInvoiceForm")[0]);
I can find my files in _FILES, but I need give name for this array.
How can I solve this problem? Thanks
The issue is because you're appending the form DOM Element to the FormData, not the file data. Instead, you should access the files array of that object:
formData.append('files', $('#sendInvoiceForm input[type="file"]')[0].files[0]);
As there can be multiple files selected, you'll need to loop through them:
$('#sendInvoiceForm input[type="file"]')[0].files.forEach(function(file) {
formData.append('files', file, file.name);
});
im trying to upload image in codeignitier using ajax
the problem is in ajax won't send any data to the controller
here is my code:
$("#file-input").change(function(e) {
$.ajax({
url: "<?php echo base_url(); ?>ControllerEditor/uploadImageUserAjax",
type: "POST",
data: new FormData(this),
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data)
{
if(data)
{
console.log(data);
}
// $("#targetLayer").html(data);
},
error: function()
{
}
});//end ajax
}); //end submit
<form id="form-uploadImage" action="ControllerEditor/uploadImageUserAjax" method="post" enctype="multipart/form-data">
<div class="image-upload">
<label for="file-input">
<img src="asset/globalimage/addIcon.png"/>
</label>
<input id="file-input" name='file-input' type="file"/><br>
Add Image
</div>
</form>
Replace below code
data: new FormData(this),
with the
data : new FormData($('#form-uploadImage')[0]),
I hope this will help you.
thank you.
you can try this!hope it's help to you
<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname" method="post" action="">
<div class="image-upload">
<label for="file-input">
<img src="asset/globalimage/addIcon.png"/>
</label>
<input id="file-input" name='file-input' type="file"/><br>
Add Image
</div>
</form>
function uploadImage() {
if (typeof FormData !== 'undefined') {
// send the formData
var formData = new FormData( $("#formID")[0] );
$.ajax({
url : baseUrl + 'uploadImage', // Controller URL
type : 'POST',
data : formData,
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
successFunction(data);
}
});
} else {
message("Your Browser Don't support FormData API! Use IE 10 or Above!");
}
}
I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?
<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>
I was planning to use FormData as below
var formData = new FormData($(this)[0]);
but figured out that it does not work in IE<10 and which is not accepted. Is there any other approach for same?
This block should work for you.
$.ajax({
url: 'url',
type: 'POST',
async: true,
dataType: "json",
data: $('#data').serializeArray(),
error: function (a, b, c) { onError(a, b, c, parameters); },
success: function (data) { onSuccess(data, parameters); }
});
You can do like this in php instead of using form data,
Serialize you form data and send through ajax, like,
$.ajax({
type: 'post',
url: 'post.php',
data: $('#form').serialize(),
success: function () {
}
});
});
using $('#form').serialize() you can send your all form data to php.
I hope it helps,
function savedata(){
var vacancy_desc = CKEDITOR.instances['vacancy_desc'].getData();
var file_data = $('#fileupload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('vacancy_records',vacancy_records);
form_data.append('vacancy_desc',vacancy_desc);
$.ajax({
url:pathname,
method:"POST",
dataType: 'text', // what to expect back from the PHP script
cache: false,
contentType: false,
processData: false,
data:form_data,
cache:false,
success:function(datas){
alert('Updated successfully !');
return false;
}
});
}
This works fine in Chrome and Firefox, but not in IE and the issue is if:
var formData = new FormData($('form')[0]); // included in script
see my code:
HTML :
<form enctype="multipart/form-data">
<input id="img_file" name="file" type="file" accept="image/x-png, image/gif, image/jpeg">
Upload
</form>
JS :
$(document).on('click', '#upload', function(event) {
event.preventDefault();
var formData = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(formData){
alert(formData);
}
});
});
Any suggestions?
Currently using this:
function acceptimage() {
var data = new FormData();
jQuery.each($('#uploadImage')[0].files, function(i, file) {
data.append('uploadImage-'+i, file);
});
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
popup('popUpDiv');
ias.cancelSelection();
ias.update();
}
});
};
And it's sending my file perfectly, but I need to send 4 field values along with it. Could anyone let me know how I post:
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
Along with the file? Many thanks
function acceptimage() {
var data = new FormData();
jQuery.each($('#uploadImage')[0].files, function(i, file) {
data.append('uploadImage-'+i, file);
data.append('x', $("#x").val());
data.append('y', $("#y").val());
data.append('w', $("#w").val());
data.append('h', $("#h").val());
});
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
popup('popUpDiv');
ias.cancelSelection();
ias.update();
}
});
};