4

Every time I have looked into AJAXy file uploading, an iframe has always been used underneath, somewhere.

Is it possible to upload a file using AJAX and no iframe or Flash? How about in the more recent versions of Firefox and Chrome?

I'm debating with my co-workers, arguing that you cannot perform an AJAXy upload with pure Javascript, since you cannot read the file contents from the user's harddrive in order to pass in the file contents via the AJAX call to the server side script.

Chad Johnson
  • 21,215
  • 34
  • 109
  • 207
  • In fairness, the three answers below (at time of writing) stipulate a fallback to IFrame/Flash for Internet Explorer. Therefore I would argue that there is no *universal* way to upload a file with AJAX without an IFrame/Flash behind the scenes. – Jake Nov 04 '11 at 15:00

3 Answers3

2

You can use famous jQuery Uploadify plugin.

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • 1
    This uses Flash though. I didn't mention that not using Flash was a requirement...I've edited the question to include this. – Chad Johnson Jan 25 '11 at 17:39
2

I also use Valums File Uploader

Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • This is the one my co-worker pointed me to. The author claims "This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers," but looking at the code, I don't see any evidence of pure javascript, non-iframe, non-flash upload happening. – Chad Johnson Jan 25 '11 at 17:42
  • Okay, after looking some more, I see: xhr.send(file). So apparently the new FileApi functionality takes care of sending the file contents to the server side without exposing them to potentially malicious client-side Javascript. – Chad Johnson Jan 25 '11 at 17:46
  • I was just fighting with the IE fallback of that library - be warned that it doesn't do the progress report the "proper" version does. – Martin T. Mar 18 '11 at 18:23
2

You can use the file API on firefox (3.6 and above) and I think the latest webkit supports it as well (not sure) though.

I did a Mootools plugin that works on FF:

http://mootools.standupweb.net/dragndrop.php

standup75
  • 4,734
  • 6
  • 28
  • 49