Many pits encountered in the field of Web uploader project

Webuploader by the Baidu Webfe (FEX) team developed a simple to HTML5, flash supplemented by the modern file upload components, relatively easy to use, compatibility is also better; official documentation
No more nonsense, directly discuss the various pits encountered in the project.

1. In an HTML page there are unknown places to upload pictures;

var uploader = webuploader.create ({

    //swf file path
    swf:base_url + '/js/uploader.swf ',

    //File receive server.
    server: ' http://webuploader.duapp.com/server/fileupload.php ',

    //Select File button. Optional.
    //Internal according to the current run is created, may be input elements, may also be flash.
    Pick: ' #picker ',

    //uncompressed image, default if JPEG, file upload will be compressed before uploading.
    Resize:false
});

Official document initialization Uploader object is this, #picker就是页面上需调用上传组件的Id, if there is 1~3, perhaps the above code can be written 3 times, as long as you are not too troublesome, but to meet 10, this method is a bit of the impulse to cry, then think of the following method , each time a uploader object is instantiated, and the control ID that needs to invoke the upload component is passed through;

function Uploader (domid) {

    //swf file path
    swf:base_url + '/js/uploader.swf ',

    //File receive server.
    server: ' http://webuploader.duapp.com/server/fileupload.php ',

    //Select File button. Optional.
    //Internal according to the current run is created, may be input elements, may also be flash.
    Pick: ' # ' +domid,

    //uncompressed image, default if JPEG, file will be compressed before uploading.
    Resize:false return

    uploader;
}

If the controls you need to upload are dynamically generated, you can set the properties of the control ID as random numbers, similar to;

Uploader ("_upload_button_" +randomnum);

Randomnum is a random number; In this case, no matter how many pages have to upload the control can invoke the upload image component.

2. The difference between filequeued and filesqueued events

If the uploaded picture is placed in a queue, the filequeued event is every picture added to the queue will be executed, in this event, you can deal with the number of images superimposed, picture thumbnail html stitching, and filesqueued is in the picture after the choice of execution, In this event, the previously spliced HTML can be displayed in some form, and I use the Artdialog frame component in the project, referring to the document link

3. Remove the image from the upload queue

Very not easy to choose the picture, picture upload finished, at this time the product comes to tell you, to upload picture queue inside the picture, need to support the selective deletion, pit ah; At this point, you can invoke the Filedequeued event

Uploader.on (' filedequeued ', function (file) {

        filecount--;
        RemoveFile (file);

    

4. To upload pictures in the queue to support the selection of image upload

If you choose a few pictures to wait for upload, or have uploaded a few, without closing the window components of the premise, want to continue to add picture upload, you can call the following code;

Add "Add Files" button,
   Uploader.addbutton ({
         id: ' #continueUpload ',
         label: ' Continue uploading '
     });

The ID above is the ID of the control that needs to call the upload component, so you can continue to upload pictures of the hi-skins.