![jquery ajax post file upload example jquery ajax post file upload example](https://softdevpractice.com/img/jQuery-ajax-file-upload.png)
![jquery ajax post file upload example jquery ajax post file upload example](https://assets.codepen.io/375012/internal/screenshots/pens/GpWvMd.default.png)
I am just trying to be as clear as I can about what is going on. There are a lot of comments in this code, which makes it seem big, but there's really only like 10 lines of functional code. attr( "encoding", "multipart/form-data" ) attr( "enctype", "multipart/form-data" ) Now that our iFrame it totally in place, hook "Infinite thinking", let's put a small Var objData = eval( "(" + jBody.html() + ")" ) Get a reference to the body tag of the set up an event listener for the LOAD event will want to be able to get back data from the Since we submitting the form to the iFrame, we We now have an iFrame that is not attached to not point to any page - we can use the address Create an iFrame with the given name that does Var strName = ("uploader" + (new Date()).getTime()) do this by using the tick count from the date. are going to be submitting the form to a hidden submitting the actual form to the primary page, we Get a reference to the form we are going to be using an AJAX "like" call rather than a form submit. When the DOM loads, initailize the form to upload the files Here is the jQuery Javascript that hi-jacks the form upload and wires the client and server together: Ok, now that we have our very basic XHTML file form and our ColdFusion file processing code, it's time to glue them together with a bit of jQuery magic.
#Jquery ajax post file upload example code#
This point is very important because it is how our "AJAX" code gets data back as you would from a standard AJAX call. The key thing to notice is that when the files are done being uploaded, the data is returned as a HTML-wrapped JSON response. The ColdFusion template then uploads the files and keeps a running array of the server file names that get generated from the upload process. This page takes any form data and searches for form fields that are in the form of "uploadX", where "X" can be a number (in between 1 and 10 in our demo). Here is our XHTML page with the ColdFusion and AJAX demo upload form: Ok, let's quickly review the code (I have to get back to work). Once the files are uploaded, you can either return the data, as I do, or just halt processing. This iFrame then handles the file upload the same way that any ColdFusion page would handle a file upload. The basic principal is that you hi-jack the form submission process and redirect it to point to a hidden iFrame that you create on the fly. This technique sounds complicated, but it turns out that with jQuery it is actually quite easy (of course, what DOESN'T jQuery make easy, right?!?). Luckily, Rob Gonda warned me about this at the New York ColdFusion User Group when he came to talk about AJAX, and so, I went the "secret iFrame" route. Of course, what you might learn quickly is that you cannot actually do this via "AJAX". I had never even attempted this before, so I was extra excited to learn something new.
#Jquery ajax post file upload example how to#
As part of the project I am currently working on, I had to learn how to post files to the server using AJAX.