资源说明：JavaScript File Uploader (SWFUpload alternative, AJAX file upload)

File Uploader

File Uploader is a flash-based file uploader, alternative to SWFUpload. It is robust, fast and easy to use. It is meant to be used on a web pages to replace standard <input type="file" />.

File Uploader is under development and it's implementation is experimental. No stable release is currently available. I am seeking for File Uploader testers. If you have downloaded File Uploader, tested it and found issues using it, please let me know what those issues were, I will fix the problem as soon as possible.

Why to create File Uploader when there are alternatives like SWFUpload available out there?

File Uploader is inspired from SWFUpload. The problem with SWFUpload is that it is not optimized for usage on a web pages where you have lots of 'upload buttons' on single page. The kind of pages could be administration panels with some kind of category list, where in front of each category you have an icon, and that icon, when clicked, allows you to instantly replace it by uploading selected file from popped-up dialog window. When you use SWFUpload to do such things, the computer resource usage grows with each new upload button instance, because everytime you instantiate new SWFUpload object, SWFUpload embeds one more SWF file instance on to the page, this means that at the end you have as much SWF's (Flash players) running as 'upload buttons' you have. If you allocate too much buttons, the browser could crash because of lack of resources. To work around this problem i was trying to implement a solution where you mouseover an icon, you get a new SWFUpload instance immediately, and when mouseout the icon, SWFUpload instance is getting destroyed. This solution did not work a minute, because of a bug i described here. The browser kept on crashing because of Flash <OBJECT> being removed from DOM while file dialog is open. Here is how File Uploader was born and what issues it is meant to solve.

What makes it great:


  
Lighweight, uses one SWF embed for all uploader instances (buttons) on page.
  
Supports multiple file selection in one dialog window and parallel file uploading
  
Supports multiple uploaders (queues) per page without impact on performance
  
Supports per-file POST arguments
  
Provides many configuration settings to adjust File Uploader behavior to your needs
  
Provides transfer rate (speed) calculation during file upload
  
Allows you to use any custom HTML as clickable 'upload button'
  
Easy-to-use high level API out of box
  
Exports low level API to create custom high level APIs
  
Supports automatic upload start
  
Designed to support any JavaScript library
  
Code is Open Source, licensed under GPL v2


With File Uploader you can:


  
Use any HTML code as clickable 'upload button'
  
Select multiple files for uploading
  
Upload selected files asynchronously (without submitting the form, just like AJAX works)
  
Display upload progress bars
  
Display transfer rates (uploading speed)
  
Display file names, sizes and types
  
Manipulate file upload queue
  
Receive JSON or any other data from server as response
  
Upload files to different URLs with different POST variables simultaneously


Installation and usage

Step 1 - Make a File Uploader bundle you need

To use File Uploader you have include four separate File Uploader source code parts in your webpage:


  
Dependent library (such as jQuery, Prototype.js or something else) and it's binding for FileUploader [located in src/js/dep/]
  
File Uploader core file [src/js/fileUploader.core.js]
  
File Uploader public API file (API you will use to work with uploader) [located in src/js/api/]
  
File Uploader SWF file [bin/flash/FileUploader.swf]


Or you can use a File Uploader bundle building tool build/build.php. Use this script from command line by running php.


Usage:   php build.php <source directory> <dependent library name> <output file name>

Example: php build.php "C:\repo\File-Uploader" jQuery "fileUploader.jQuery.js"


Note: currently only jQuery library API is supported.

Step 2 - Deploy File Uploader on your webserver


  
Take the files you collected and deploy them on your webserver
  
Make sure fileUploader.core.js is configured correctly and URL of File Uploader SWF file is correct
  
Include dependent library JS code, include dependent library File Uploader bindings, include fileUploader.core.js and File Uploader public API file.
  
    Example:
    
  <!-- dependent library and binding -->
  <script type="text/javascript" src="/src/js/dep/jQuery/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="/src/js/dep/jQuery/fileUploader.jQuery.js"></script>
  
  <!-- uploader core file -->
  <script type="text/javascript" src="/src/js/fileUploader.core.js"></script>
  
  <!-- uploader public API -->
  <script type="text/javascript" src="/src/js/api/fileUploader.Uploader.js"></script>
    
  


Step 3 - Use File Uploader

To use out of box API, use the following code:

  <!-- dependent library and binding -->
  <script type="text/javascript" src="/src/js/dep/jQuery/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="/src/js/dep/jQuery/fileUploader.jQuery.js"></script>
  
  <!-- uploader core file -->
  <script type="text/javascript" src="/src/js/fileUploader.core.js"></script>
  
  <!-- uploader public API -->
  <script type="text/javascript" src="/src/js/api/fileUploader.Uploader.js"></script>


...

  // Specify where your flash file (FileUploader.swf) resides.
  // This should be done once before any instantiation of fileUploader.Uploader object.
  fileUploader.config.swfUrl ='/flash/FileUploader.swf';
  
  // instantiate uploader
  var uploader =new fileUploader.Uploader({
    // url where to upload the file
    'url': 'http://www.example.com/upload.php',
    // file entry name
    'fileName': 'myFile',
    // POST arguments
    'postArgs': {'action':'upload','galleryId':15},
    '
  });
  
  // configure uploader (optional)
  uploader.concurrency =2;
  uploader.timeout =15;
  
  // listen to events
  
  // handle dialog open
  uploader.onDialogOpen =function() {
    
  };
  
  // handle file selection
  uploader.onSelect =function( id, fileInfo) {
    
  };
  
  // handle file removal
  uploader.onRemove =function( id, fileInfo) {
    
  };
  
  // handle dialog closure
  uploader.onDialogClose =function() {
    
  };
  
  // handle file uploading start
  uploader.onUploadStart =function( id, fileInfo) {
    
  };
  
  // handle file uploading progress
  uploader.onUploadProgress =function( id, fileInfo, bytesLoaded, bytesTotal, percComplete) {
    
  };
  
  // handle file uploading error
  uploader.onUploadError =function( id, fileInfo, errorMsg) {
    
  };
  
  // handle file uploading success
  uploader.onUploadSuccess =function( id, fileInfo, serverData, filesPending) {
    
  };
  
  // handle file uploading completion
  uploader.onUploadComplete =function( id, fileInfo, filesPending, removeFromQueue) {
    
  };
  
  // deploy
  uploader.attach( document.getElementById( 'myButton'));


jQuery API:

  <!-- dependent library and binding -->
  <script type="text/javascript" src="/src/js/dep/jQuery/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="/src/js/dep/jQuery/fileUploader.jQuery.js"></script>
  
  <!-- uploader core file -->
  <script type="text/javascript" src="/src/js/fileUploader.core.js"></script>
  
  <!-- uploader public API -->
  <script type="text/javascript" src="/src/js/api/fileUploader.Uploader.js"></script>
  
  <!-- jQuery public API binding -->
  <script type="text/javascript" src="/src/js/api/jQuery/fileUploader.jQuery.js"></script>


...

  // Specify where your flash file (FileUploader.swf) resides.
  // This should be done once before any instantiation of fileUploader.Uploader object.
  fileUploader.config.swfUrl ='/flash/FileUploader.swf';
  
  // jQuery-wrapped #myButton
  var $btn =$( '#myButton');
  
  // listen to events
  $btn.bind( 'uploadDialogOpen uploadDialogClose uploadFileSelect uploadFileRemove uploadStart uploadProgress uploadSuccess uploadError uploadComplete', function( e, data){
    switch( e.type) {
      case 'uploadDialogOpen':
        debug( 'Dialog open');
      break;
      case 'uploadDialogClose':
        debug( 'Dialog close');
      break;
      case 'uploadFileSelect':
        debug( 'Select file #' +data.fileId +' - ' +data.fileInfo.name + ' (size=' +data.fileInfo.size +')');
      break;
      case 'uploadFileRemove':
        debug( 'Remove file #' +data.fileId +' - ' +data.fileInfo.name);
      break;
      case 'uploadStart':
        debug( 'Start upload #' +data.fileId +' - ' +data.fileInfo.name);
      break;
      case 'uploadProgress':
        debug( 'Upload progress #' +data.fileId +' - ' +data.fileInfo.name + ' (' +data.percComplete +'%)');
      break;
      case 'uploadSuccess':
        debug( 'Upload success #' +data.fileId +' - ' +data.fileInfo.name);
      break;
      case 'uploadError':
        debug( 'Upload error #' +data.fileId +' - ' +data.fileInfo.name +' (' +data.errorMsg +')');
      break;
      case 'uploadComplete':
        debug( 'Upload complete #' +data.fileId +' - ' +data.fileInfo.name);
      break;
    }
  });
  
  // initialize uploader
  var uploaderObject =$btn.uploader({
    'url': '/test/receive.php'
  });
  
  // optionally configure uploader instance
  //uploaderObject.concurrency =2;
  
  // detach uploader from a button
  //uploaderObject.detach();


Examples

You can view live debugging preview of native API here. jQuery version of File Uploader debug preview can be found here.

If you have cloned repo and trying to view tests from your local hard drive, the tests won't work because of Flash's security features. You have to upload tests to a web host and access them via browser to see File Uploader in action.

Supported browsers

File Uploader was tested and is working as expected in:


  
Win32 Flash player 10.0.22+
  
Internet Explorer 7
  
Internet Explorer 8
  
Firefox 3.5.5
  
Safari 4.0.4
  
Chrome 3.0
  
Opera 10.10


More info to come...

联系我们：verysource_com

CopyRight © 2008-2022 verySource.Com All Rights reserved.　京ICP备17048824号-1　京公网安备：11010502034788