Upload an image with jquery ajax with a duplicate-able input
So if I understand it correctly, you want to attach some custom data to file upload. Is it correct?
So if you do not want to modify jQuery plugin you are using, I would add some hidden fields into form and put that custom data into them just before submit. Then plugin should pick them up and send together with files.
I don't know if this is suitable for your need or not, but I have used Andrew Valums file-uploader to achieve same result.
It can upload multiple files, even have drag and drop support, but its pure javascript not jQuery, but on the other hand, Ray Nicholus has forked Valums code to a jQuery plugin.
My experience is with Valums version, and it works side by side with jQuery without problem. The only problem is you have to interact with it in basic javascript style.
My implementation of upload is like this:
- provide an interface to upload files to server
- make file-uploader to upload to a certain folder on server, and return the name and path of the file on server (usually "upload folder"/"file name") so you can store that in a hidden element for the form
- when user save their data, only save the path to the file (obtained from step 2) into database
note: with this, you don't need to duplicate any input form for file upload, as you can upload as many file as you like, as long as your server can handle it ofcourse ;)
https://github.com/valums/file-uploader