Solved

Post file via the $.post() jquery method

Posted on 2015-02-08
3
106 Views
Last Modified: 2015-02-09
Experts,

I am trying to POST form data (several text fields and a file) via AJAX using the following code:
//POST FORM DATA AND SHOW SUCCESS MESSAGE
$.post("save.php?submit",
	$("#new_request_form").serialize()).done(
		//ALERT USER THAT PROJECT HAS BEEN SAVED
		function(){
			alert('Your request has been submitted for consideration.\n\nPlease check your Lotus Notes inbox for a copy of your submission.\n\nPress "OK" to continue.');
		},//END FUNCTION
		//REDIRECT
		function(){
			document.location.href = "demo.php";
		}//END FUCTION
);

Open in new window

All of my form data posts correctly except the File field. I've read that this may have to do with the serialization of the data as it is being passed.

Can someone help me update my code so that it posts the File field that I have in my form?

Cheers!
0
Comment
Question by:evibesmusic
3 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 400 total points
ID: 40597727
Hi,
as far as I know, the serialize would not take file inputs.
Depending on the supported client browsers (e.g. IE 8) you might have a better chance by using
$( "#new_request_form" )
  .submit( function( event ) {
$.ajax( {
      url: '/save.php',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
});

Open in new window

HTH
Rainer
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 40598270
Although technically it can be done, it's a bit of a nightmare, and not widely supported across all browsers (won't work in IE9). You would save yourself a headache by just using one of the various plugins available - such as Uploadify. Do a google for jQuery File Upload
0
 

Author Closing Comment

by:evibesmusic
ID: 40598974
Thank you.

I will change methods as per both suggestions.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a pageā€¦
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now