是否可以使用健壮的javascript上传文件

Question

I want a robust way to upload a file. That means that I want to be able to handle interruptions, error and pauses.

So my question is: Is something like the following possible using javascript only on the client .

If so I would like pointers to libraries, tutorials, books or implementations. If not I would like an explanation to why it's not possible.

Scenario:

• Open a large file
• Split it into parts

For each part I would like to

• Create checksum and append to data
• Post data to server (the server would check if data uploaded correctly)
• Check a web page on server to see if upload is ok
• If yes upload next part if no retry

Assume all posts to server is accompanied by relevant meta data ( sessionid and whatnot ).

Answer 1

No. You can, through a certain amount of hackery, begin a file upload with AJAX, in which case you'll be able to tell when it's finished uploading. That's it.

JavaScript does not have any direct access to files on the visitor's computer for security reasons. The most you'll be able to see from within your script is the filename.

Answer 2

Firefox 3.5 adds support for DOM progress event monitoring of XMLHttpRequest transfers which allow you to keep track of at least upload status as well as completion and cancellation of uploads.

It's also possible to simulate progress tracking with iframes in clients that don't support this newer XMLHTTPRequest additions.

For an example of script that does just this, take a look at NoSWFUpload . I've been using it succesfully for about few months now.

Answer 3

It's possible in Firefox 3 to open a local file as chosen by a file upload field and read it into a JavaScript variable using the field's files array . That would allow you to do your own chunking, hashing and sending by AJAX.

There is some talk of getting something like this standardised by W3, but for the immediate future no other browser supports this.

Answer 4

Yes. Please look at the following file -

function Upload() {

  var self = this;

  this.btnUpload;

  this.frmUpload;

  this.inputFile;

  this.divUploadArea;

  this.upload = function(event, target) {
    event.stopPropagation();

    if (!$('.upload-button').length) {
      return false;
    }

    if (!$('.form').length) {
      return false;
    }  

    self.btnUpload = target;
    self.frmUpload = $(self.btnUpload).parents('form:first');
    self.inputFile = $(self.btnUpload).prev('.upload-input');
    self.divUploadArea = $(self.btnUpload).next('.uploaded-area');

    var target = $(self.frmUpload).attr('target');
    var action = $(self.frmUpload).attr('action');

    $(self.frmUpload).attr('target', 'upload_target'); //change the form's target to the iframe's id
    $(self.frmUpload).attr('action', '/trnUpload/upload'); //change the form's action to the upload iframe function page
    $(self.frmUpload).parent("div").prepend(self.iframe);

    $('#upload_target').load(function(event){

      if (!$("#upload_target").contents().find('.upload-success:first').length) {
        $('#upload_target').remove();
        return false;
      } else if($("#upload_target").contents().find('.upload-success:first') == 'false') {
        $('#upload_target').remove();
        return false;  
      }

      var fid = $("#upload_target").contents().find('.fid:first').html();
      var filename = $("#upload_target").contents().find('.filename:first').html();
      var filetype = $("#upload_target").contents().find('.filetype:first').html();
      var filesize = $("#upload_target").contents().find('.filesize:first').html();

      $(self.frmUpload).attr('target', target); //change the form's target to the iframe's id
      $(self.frmUpload).attr('action', action); //change the form's  
      $('#upload_target').remove();

      self.insertUploadLink(fid, filename, filetype, filesize);
    });

  };

  this.iframe = '' +
                'false
' +
                '';

  this.insertUploadLink = function (fid, filename, filetype, filesize) {
    $('#upload-value').attr('value', fid);

  }

}

$(document).ready(event) {
  var myupload = new Upload();  
  myupload.upload(event, event.target);
}

With also using PHP's APC to query the status of how much of the file has been uploaded, you can do a progress bar with a periodical updater (I would use jQuery, which the above class requires also). You can use PHP to output both the periodical results, and the results of the upload in the iframe that is temporarily created.

This is hackish. You will need to spend a lot of time to get it to work. You will need admin access to whatever server you want to run it on so you can install APC. You will also need to setup the HTML form to correspond to the js Upload class. A reference on how to do this can be found here http://www.ultramegatech.com/blog/2008/12/creating-upload-progress-bar-php/