upload file with jquery

Question

i need to upload file with jquery. i now about uploadify plugin, but i don't want to use such a big plugin for it.

i have an idea, how can i do it, could you tell me will it work?

if i pass the <input type="value"> input's value as javascript variable to some.php file via ajax, and then make upload there, will it work?

Thanks?

Answer 1

JavaScript can't do file uploads on its own without the help of Flash, which is why you need something like Uploadify or SWFUpload to do the job.

A workaround option might be using an invisible iframe you do the upload to using the form's target property. That would work the traditional way, but the user could stay on the current page:

<form target="iframe_id" ....

Answer 2

If you don't worry about multiple uploads then I recommend jQuery Form Plugin It is small

Answer 3

I'm assuming the reason you want to do this is so you can have an async-style file upload and display information about the uploaded file after the upload has completed (a thumbnail, for example, with images). The jQuery From Plugin page has an option that covers iframe uploads that looks pretty good.

I've also used the the Ajax IFrame Method, which works well, but is not structured as a jQuery plugin. Though it plays nicely.

Basically what these plugins both do, is attach an onsubmit event handler to your form. When the form is submitted, the plugin captures the event, creates a hidden iframe on the page, clones the form fields from the submitting form, and submits that instead. The result is that the original form data gets submitted, but the user visible page doesn't have to be directed to the url in the form action.

Of course, once the iframe form has finished submitting, you could fire a callback and do any post-submittal scripting you need. The ajax iframe method I linked to above has good documentation for this.