0

Currently my form is showing 3 'input' fields for uploading 3 files. This looks bad.

I want to show only one input field (and one upload button) irrespective of number of files to be uploaded.

This is how it should be working:

Once user selects file and clicks on upload button, selected file path (an name) should be shown below the input field with the 'Remove' text next to it and user should now be able to select next file using same input filed and button. Can I achieve this using ajax or jQuery? I am sure this is pretty common thing done on many websites.

Sachin
  • 449
  • 2
  • 9
  • 27

3 Answers3

0

Take a look at Plupload, it seems to cover what you need. http://www.plupload.com/

ZNS
  • 840
  • 1
  • 9
  • 14
  • @Sachin , This does look awesome too ! – Shrayas Aug 20 '12 at 14:24
  • Can I not achieve this without using exetrnal tool? Can I use jQuery or Ajax. – Sachin Aug 20 '12 at 14:25
  • @Sachin, you can look at the code to understand how it is done , and write yourself a toned down version of it . – Shrayas Aug 20 '12 at 14:28
  • You could do it using jquery. When a user has added a file to upload (check this using the changed-event of the upload-field) you can take the value and create an html-element for it, also generate a remove-link. Then hide the upload-field and create a new one in it's place. Ofcourse you need to make sure the multiple upload fields are supported on the server-side also. – ZNS Aug 20 '12 at 14:31
0

If you're using something like jquery , there almost always is a plugin out there to do something that you want to do .

For instance , heres something that might be of good help to you , Check it out and let me know if this is fine:

http://www.fyneworks.com/jquery/multiple-file-upload/

Shrayas
  • 6,784
  • 11
  • 37
  • 54
  • Also @Sachin, you can look at this question too : http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – Shrayas Aug 20 '12 at 14:34
  • I've accepted the answer. Now trying to understand how can I dispay uploaded files on the next div instead of the current one. I need to see how can i customize that – Sachin Aug 20 '12 at 15:54
  • stucked at next step. I want to customize the appearance of files so that i can show it on the separate Div. Also to change font size etc but not working. I started with below funcation but it is not working, – Sachin Aug 20 '12 at 17:37
  • $('#T7').MultiFile({ list: '#T7-list' }); – Sachin Aug 20 '12 at 17:37
0

Have a look at Valums' File Uploader.

Doesn't require jQuery or any other javascript library.

Dan F.
  • 1,353
  • 16
  • 23