jQuery Upload Progress and AJAX file upload

Question

It seems like I have not clearly communicated my problem. I need to send a file (using AJAX) and I need to get the upload progress of the file using the Nginx HttpUploadProgressModule. I need a good solution to this problem. I have tried with the jquery.uploadprogress plugin, but I am finding myself having to rewrite much of it to get it to work in all browsers and to send the file using AJAX.

All I need is the code to do this and it needs to work in all major browsers (Chrome, Safari, FireFox, and IE). It would be even better If I could get a solution that will handle multiple file uploads.

I am using the jquery.uploadprogress plugin to get the upload progress of a file from the NginxHttpUploadProgressModule. This is inside an iframe for a facebook application. It works in firefox, but it fails in chrome/safari.

When I open the console I get this.

Uncaught ReferenceError: progressFrame is not defined jquery.uploadprogress.js:80

Any idea how I would fix that?

I would like to also send the file using AJAX when it is completed. How would I implement that?

EDIT:
I need this soon and it is important so I am going to put a 100 point bounty on this question. The first person to answer it will receive the 100 points.

EDIT 2:
Jake33 helped me solve the first problem. First person to leave a response with how to send the file with ajax too will receive the 100 points.

User · Answer

Here are some options for using AJAX to upload files:

AjaxFileUpload - Requires a form element on the page, but uploads the file without reloading the page. See the Demo.
List of JQuery Plug-ins Tagged With "File"
Uploadify - A Flash-based method of uploading files.
How can I upload files asynchronously?
Ten Examples of AJAX File Upload - This was posted this year.

UPDATE: Here is a JQuery plug-in for Multiple File Uploading.

User · Answer

Uploading files is actually possible with AJAX these days  Yes  AJAX  not some crappy AJAX wannabes like swf or java   This example might help you out  https   webblocks nl tests ajax file-drag-drop html   It also includes the drag drop interface but that s easily ignored    Basically what it comes down to is this    lt input id  files  type  file    gt    lt script gt  document getElementById  files   addEventListener  change   function e        var file   this files 0       var xhr   new XMLHttpRequest         xhr upload    xhr  addEventListener  progress   function e            var done   e position    e loaded         var total   e totalSize    e total          console log  xhr progress      Math round done total 100                      xhr addEventListener  load   function e            console log  xhr upload complete   e  this responseText               xhr open  post     URL-HERE   true       xhr send file        lt  script gt     demo  http   jsfiddle net rudiedirkx jzxmro8r    So basically what it comes down to is this     xhr send file     Where file is typeof Blob  http   www w3 org TR FileAPI   Another  better IMO  way is to use FormData  This allows you to 1  name a file  like in a form and 2  send other stuff  files too   like in a form   var fd   new FormData  fd append  photo1   file   fd append  photo2   file2   fd append  other data    foo bar    xhr send fd     FormData makes the server code cleaner and more backward compatible  since the request now has the exact same format as normal forms    All of it is not experimental  but very modern  Chrome 8  and Firefox 4  know what to do  but I don t know about any others   This is how I handled the request  1 image per request  in PHP   if   isset   FILES  file             filename   basename   FILES  file    name          error   true          Only upload if on my home win dev machine     if   isset   SERVER  WINDIR                 path    uploads    filename           error    move uploaded file   FILES  file    tmp name     path               rsp   array           error    gt   error     Used in JS          filename    gt   filename           filepath    gt    tests uploads      filename     Web accessible            echo json encode  rsp       exit

[ajax] jQuery Upload Progress and AJAX file upload

The answer is

Examples related to ajax

Examples related to jquery

Examples related to file-upload

Examples related to nginx

Tags