Web Uploader code analysis

Interface description

All the code of Web Uploader is in an internal closure, which exposes the only variable WebUploader, so there is no need to worry about the conflict between this framework and other frameworks.

All internal classes and functions are exposed under the WebUploader namespace.

Webuploader is used in the Demo Create method to initialize. In fact, you can directly access webuploader Uploader.

var uploader = new WebUploader.Uploader({
    swf: 'path_of_swf/Uploader.swf'

    // Other configuration items

For specific internal classes, please go to the [API] ({{site. Baseurl}} / Doc / index. HTML) page.


The Uploader instance has the same event API s as the Backbone: on, off, once, trigger.

uploader.on( 'fileQueued', function( file ) {
    // do some things.

In addition to binding events through on, the Uploader instance also has a more convenient way to add events.

uploader.onFileQueued = function( file ) {
    // do some things.

Like onEvent in Document Element, its execution is later than that of handler added by on. If there is a return false in those handlers, it will not be executed in this onEvent.


The functions in Uploader are divided into several widget s, and the command mechanism is used for communication and cooperation.

As follows, filepicker will directly send out the result request after the user selects the file, and then be responsible for the queue widget of the queue, listen to the command, and decide whether to join the queue according to the accept in the configuration item.

// in file picker
picker.on( 'select', function( files ) {
    me.owner.request( 'add-file', [ files ]);

// in queue picker
    'add-file': 'addFiles'

    // xxxx
}, {

    addFiles: function( files ) {

        // Traverse the files in files and filter out those that do not meet the rules.

Uploader. The regeister method is used to specify which commands the widget should respond to and which method should respond. In the above example, when the add file command is sent, the internal addFiles member method will be executed to the same command. Multiple handlers can be specified for the same command. Each handler will be executed in order of addition, and the subsequent handlers cannot be truncated by the previous handler.

handler can be synchronous or asynchronous. When it is an asynchronous process, you only need to return a promise object. If there is a possibility of asynchrony, the request caller will wait for the process to end before continuing. For example, when webuploader is running in flash mode, it needs to wait for the flash to load before it is ready. This process is an asynchronous process. The current practice is as follows:

// When the uploader is initialized
me.request( 'init', opts, function() {
    me.state = 'ready';

// The initialization process in filepicker 'widget'.
    'init': 'init'
}, {
    init: function( opts ) {

        var deferred = Base.Deferred();

        // Load flash
        // When flash ready executes deferred Resolve method.

        return deferred.promise();

At present, there are many kinds of command s in webuploader. Here are some important ones.

name parameter explain
add-file files: File object or File array Used to add files to the queue.
before-send-file file: File object Before the file is sent, the request has not been sliced (if slicing is configured), which can be used for overall md5 verification of the file.
before-send block: fragment object The request can be used for fragment verification before fragment sending. If the fragment has been uploaded successfully, a rejected promise can be returned to skip the fragment upload
after-send-file file: File object After all fragments are uploaded and there are no errors, request is used for fragment verification. At this time, if promise is reject ed, the current file upload will trigger an error.

Document organization

webuploader consists of many independent small files. Each file is AMD Standardized organization, convenient and similar RequireJS Such libraries can be used directly.

Such as lib / file js

 * @fileOverview File
], function( Base, Blob ) {

    var uid = 0,
        rExt = /\.([^.]+)$/;

    function File( ruid, file ) {
        var ext;

        Blob.apply( this, arguments );
        this.name = file.name || ('untitled' + uid++);

        if ( !this.type ) {
            ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
            if ( ~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
                this.type = 'image/' + ext;

        this.ext = ext;
        this.lastModifiedDate = file.lastModifiedDate ||
                (new Date()).toLocaleString();

    return Base.inherits( Blob, File );

The following is the current directory structure and description.

├── base.js   Implement some common help class methods, such as inherits, log wait.
├── file.js    File class, Queue Data class stored in.
├── jq-bridge.js    jQuery Alternative, only to achieve webuploader What you need, of course, if you already have it jQuery No, this file doesn't need to be packaged.
├── lib
│   ├── blob.js  belt ruid(For compatibility flash Abstract, ruid Is runtime id)of Blob class
│   ├── dnd.js    File drag
│   ├── file.js   belt ruid File class, blob Subclass of.
│   ├── filepaste.js  Responsible for picture pasting.
│   ├── filepicker.js    File selector
│   ├── image.js    Image processing class to generate thumbnails and image compression.
│   └── transport.js    File transfer.
├── mediator.js   Event class
├── promise.js    with jq-bridge, In no jQuery Only when you need it. Used to implement Deferred. 
├── queue.js    queue
├── runtime
│   ├── client.js   Connector
│   ├── compbase.js    component Base class.
│   ├── flash
│   │   ├── xxx lib in flash Specific implementation of.
│   ├── html5
│   │   ├── xxx lib in html5 Specific implementation of.
│   └── runtime.js
├── uploader.js    Uploader Class.
└── widgets
    ├── filednd.js   File drag application Uploader
    ├── filepaste.js   Picture paste applied in Uploader
    ├── filepicker.js   File upload application Uploader Yes.
    ├── image.js     The image file is compressed and previewed at the corresponding time
    ├── queue.js     queue management 
    ├── runtime.js    add to runtime Information to Uploader
    ├── upload.js      Responsible for specific upload logic
    ├── validator.js    Various verifiers
    └── widget.js    realization command mechanism

Posted by Jenski on Tue, 10 May 2022 23:29:08 +0300