3

Despite there are numerous articles on AJAX file uploading on StackOverflow.com, I did not find a complete and pure JavaScript AJAX uploader.

Many of them involve JQuery, another are asp.net based, another say, pure JavaScript based AJAX file upload is not possible because of security issues.

I searched internet too, but it seems to be very difficult finding a complete and clean JavaScript AJAX example, with PHP script on the server side.

Can I kindly ask, to provide me with as simple as possible, but functional and clean JavaScript AJAX file upload? I do not wish to include Drag and Drop functionality but these technologies may be used:

  • HTML5
  • JavaScript but no JQuery
  • PHP
  • type="file" input filed
  • no demos please, I just wish to have a code I can further modify on my own

Maybe, you will find the right example even on StackOverflow.com. If yes, then I do apologize for not finding it as well. However, I definitely did my homework and did the search. Thank you.


Alexander has just pointed out that this question is bad, because it requests for a code sample. Well, the last think I wish is getting this question closed, because of wrong interpretation.

If you wish, provide me with a tutorial, that talks about this subject, or tell me about a book that contains the answers. I am writing my application, and I did not yet pollute it with any libraries, neither JQuery. I would like to keep it so, as long as it is possible.

The answer is yours, and you can formulate it in the way you feel it is appropriate. You can avoid providing code, if you think, it is wrong to do it.

5
  • I'd point out that if someone can show you a demo, you can view source for the javascript and take/modify that. Commented Sep 23, 2012 at 12:55
  • Can someone tell me how this qualifies as a real Q&A, and not as a code request? Commented Sep 23, 2012 at 13:01
  • 2
    @Alexander: Hi, I can tell you: I asked about he problem I have and explained why it is a problem for me. At the end of the day, the answer is in your hands. you do not need to provide me with the code, if you do not wish so, you can point me to a location, that answers the points, or advise me a book, which contains the information I look for. At the end of the day, the answer is yours, I just wish to learn how to do it. Commented Sep 23, 2012 at 13:04
  • I did not yet pollute it with any libraries, neither JQuery. Haha, I think the same, but here in stackoverflow lots of people love jQuery. Commented Sep 23, 2012 at 13:14
  • @Oriol: Yeah, i was thinking, that maybe, i should be more careful about saying that. But it is not so negative, yet it is quite descriptive. Unless I have real reasons, I think, I should prefer sticking with pure JavaScript, instead of using JQuery, because some very good tutorial uses it too. Commented Sep 23, 2012 at 16:07

1 Answer 1

4

There are two approaches you can take.

  1. Submit a form to a hidden iframe (better supported)
  2. Use the File API (more powerful)
Sign up to request clarification or add additional context in comments.

4 Comments

Just using an iFrame is your best bet. There's virtually no consistency between browsers in how files are uploaded with the FileAPI yet.
@Quentin: +1, and thanks for the examples. They helped a lot.
@JeffreySweeney: Hi Jeffrey. I found one limitation using iFrame. I can not get a progress bar. I therefore have another strategy: To go with FileAPI for browsers that support it: Chrome, Opera, Firefox. For the remaining ones, I will go with Flash based uploader, which can provide me with upload progress information. Does it sound to you as acceptable solution?
@Bunkai.Satori Each browser implements the FileAPI a tad differently. They do support it (or at least a few parts of it), but they don't all support it the same way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.