0

I'm looking for a javascript/ajax based file upload. The way it would work is this:

1) User clicks browse

2) User selects CTRL and selects the files he wants to upload

3) Via Javascript the user is shown a few loading graphics (1 per each file being uploaded)

4) After each upload finishes, a loading graphic is replaced with a success graphic and the filename of the uploaded file.

So what I'm really asking for is:

1) A way to do javascript/ajax based file uploads.

2) A way to detect when a file starts/finishes uploading, or to call a function when it happens.

Ali
  • 261,656
  • 265
  • 575
  • 769

2 Answers2

3

Check http://valums.com/ajax-upload/ it's a neat plugin.

fabrik
  • 14,094
  • 8
  • 55
  • 71
  • 1
    OMG thats so funny http://stackoverflow.com/questions/5553288/multiple-file-uploads-via-javascript-ajax I totaly think you should get credit for that, or is it the other way around? :) – Elad Lachmi Apr 05 '11 at 14:19
  • 1
    @Elad Lachmi this is crazy :) – fabrik Apr 05 '11 at 14:20
  • 1) What does it require on the server side for it to work, does it need any special php or apache features enabled? 2) How can the text of the button be changed from 'Upload a file' to something else? – Ali Apr 05 '11 at 14:21
  • @Click Upvote No, it hasn't got any special needs, almost plug and play. You can modify the whole script, its look, anything if you want via CSS/HTML/JS. – fabrik Apr 05 '11 at 14:23
  • 1
    @John Strickler - What?! are you two years old? Dude, you just went and copy-pasted fabrik's answer! At least give credit. Lol. – Elad Lachmi Apr 05 '11 at 14:25
  • @Fabrik some comments on that blog post say that it requires the `apache_request_headers()` function? – Ali Apr 05 '11 at 14:26
  • @Click Upvote Maybe it's my fault but i don't understand you. Do you have PHP on your web server? `apache_request_headers` is part of PHP since PHP4 – fabrik Apr 05 '11 at 14:27
  • Please stop trolling. He originally posted it here, I read it, agreed and upvoted. Someone else posted literally two minutes later asking the same question, so i copy and pasted his answer. He has "credit" for it here. It's just a link and a silly comment after it. I made it an exact copy for the hilarity factor. I can't believe it bothered you or him. – John Strickler Apr 05 '11 at 14:30
  • @John Strickler i am unable to copy someone's answer, thats all. – fabrik Apr 05 '11 at 14:32
  • You have no original code or anything original in your post whatsoever. This will be my last comment here. – John Strickler Apr 05 '11 at 14:33
  • @John Strickler - Oh... look @ John all grown up :) You didn't even bother to say sorry. @fabrik - +1 on a just can't get myself to do that. – Elad Lachmi Apr 05 '11 at 16:42
1

I recently faced a similar problem. We had been using Uploadify (http://www.uploadify.com/) to do uploads. I wrote a blog post on how to use Uploadify to perform multiple file uploads:

http://blog.bobcravens.com/2011/03/upload-multiple-files-with-progress-using-uploadify/

There are a couple of supported options:

  • Use a single 'input' element and select multiple files.

  • Use multiple 'input' elements to select a single file each.

Hope this helps.

Bob

rcravens
  • 8,320
  • 2
  • 33
  • 26