Develop Reference

How to get a file from local disk then pass that to a POST method to upload to server

I have an input tag of type file. I use this to get a file from my local disc. What I need is a way to get and hold that file so I can POST it to a server.
<input type='file'>
//I now want to hold this file and pass this to this ajax post method
$.ajax({
type: "POST",
url: url, //I have URL, this isn't a problem
data: data, // do I place response here ?
success: function(){ alert('file posted')
dataType: dataType // ?
})

You have to post form data to the server through ajax. Try Following.
$.ajax({
url: url,
type: "POST",
data: new FormData('#yourForm'),
contentType: false,
cache: false,
processData:false,
success : function(){
// success message.
}
});
#yourForm is your form. if you are using form submit event then replace this by 'this' keyword.
So the formData is your form's data. and fetch file input by name on server.

Upload files from <input type="file" multiple/> via appending to FormData

I have a form with file input
<input type="file" id="FileInput" multiple />
and I try to upload files to server. Server-side code like this:
[HttpPost]
public ActionResult Index(HttpPostedFileBase[] files) {
... process ...
}
For send post request I use $.ajax
var formData = new FormData($('#FormId')[
formData.append("files", $('#FileInput')[0].files);
$.ajax({
url: "/default/index",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function() {
alert("success");
}
});
and it doesn't work.
But if I add name="files" attribute to input (for native bind) and remove instruction formData.append("files", $('#FileInput')[0].files); code works fine.
So what difference between theese ways and how I can pass files via appending data to FormData?
NOTE: in my work I can't bind form via name attribute, cause the form comes from template and have no name attribute.

Append var to FormData

I am using CKEditor as a WYSIWYG editor for an internal email system that I'm building, which requires me to get the data from from the textarea input like this:
var message = CKEDITOR.instances.messageArea.getData();
I am also allowing users to send attachments and I am sending the files to the server via the HTML5 FormData.
//create form variable
var form = $('#sendIndividualEmail')[0];
var formData = new FormData(form);
I have tried to append the the message variable to the formData, but it seems that formData only allows form fields to be appended.
Is there alternative way to append a var to FormData if it isn't a form field? If not, is there another way to get the message variable to the server with the formData?
ajax code:
request = $.ajax({
url: baseURL+'/sendIndividualMessage',
type: "post",
data: formData,
mimeType: "multipart/form-data",
dataType: json,
contentType: false, //required for formData
cache: false,
processData: false, //require for formData
});

You can append data to a FormData like that :
formData.append('message', message);
It doesn't need to be a form field.
To debug FormData, you have to post the data.
MDN FormData.append() Reference
Have a look here : FormData.append("key", "value") is not working

Jquery ajax returning 404 not found

I'm using Ajax to pass my form data and files to a PHP file for processing.
Javascript:
$("form#applyform").submit(function(){
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'ValidateApplication.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
ValidateApplication.php definitely exists. I can view it if I type in the address into the web browser, however when I submit the form chrome console returns 404.
The PHP is in the same folder as the HTML page the JavaScript is running on so I am confused as to why I keep getting a 404.
UPDATE
Changing POST to GET gets rid of the 404 error, but returns a 500 Internal Server Error
UPDATE 2
Changing the action of the form to ="ValidateApplication.php" and submitting it as normal (without AJAX) leads to the correct file without any errors.

I've had the same issue and after 2 hours looking for what was causing the 404 Not Found error I found that I was recently playing with the header() from PHP and had forgotten to delete the following line of code:
header($_SERVER["SERVER_PROTOCOL"]." 404 Not Found");
After deleting it, my Ajax functions became normal again.

It seemed to be a problem with the FormData object. Once I changed my method to use .serialize() instead, the page worked just fine.
$("form#applyform").submit(function(){
var data = $("form#applyform").serialize();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'ValidateApplication.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}

For me, it was that I used an input field with name="name" which made the called page return a 404. Weird stuff, hope this helps someone.

Try adding a / before the filename:
url: '/ValidateApplication.php',
Try changing the request type from POST to GET and see if it works.
Try commenting out parts of the code:
/*cache: false,
contentType: false,
processData: false,*/
Try another browser.

Please validate you have provided name="" attribute properly in the form
Form submit validate all bean attribute from name attribute of the input

Please check your PHP page name!
Do not use page-ajax.php, but instead use page_ajax.php.

Based on my case, I'd be sure to recheck your url address.

how can I upload and post image like facebook without page reload or refresh

html code here
<form id="upload_img_form" enctype="multipart/form-data">
<input id="add_picture" type="file" name="post_img" >
<span id="postbutton" >Post</span>
</form>
//I don't want to use the action at the form above, because the page would reload or refresh
I have done some of the research and knew the dataform in ajax or jquery may work for this problem. But I don't know how to retrieve the data once I use jquery method
javascript codes here
$('#postbutton').click(function(){
var formData = new FormData($('#upload_img_form')[0]);
$.ajax({
url: 'upload.php', //Server script to process data
type: 'POST',
//Ajax events
beforeSend: beforeSendHandler,
success: completeHandler,
error: errorHandler,
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
Basically, I don't know how to process the data in 'upload.php', and I have tried $_POST['formData'] and I need to get the parameter for move_uploaded_files($_FILES['file']['name'],$path) in order to save the file to a specific path