Plupload upload detailed explanation, Plupload multi-instance upload, plupload multiple upload button--Recommended use

Source: Internet
Author: User
Tags event listener silverlight

Today help friends solve plupload upload problem, check a lot of information, data is still quite whole, but a little fragmented, so tidy up, merge hair out.

This tutorial includes:

    • Plupload upload detailed talk.
    • Plupload multiple instance uploads.
    • Plupload multiple upload buttons.
    • Plupload upload successfully gets the return value.
Let's take a look at a more complete plupload Demo
<! DOCTYPE html>//instantiate an Plupload upload object    varuploader =NewPlupload.Uploader ({Browse_button: ' Browse ',//the button that triggers the File selection dialog box, which is the element IDURL: ' images/upload.shtml ',//server-side upload page addressFlash_swf_url: ' js/moxie.swf ',//swf file, you need to configure this parameter when you need to upload using SWF modeMax_file_size: ' 2MB ',//limit to 2MBFilters: [{title: "Image Files", Extensions: "Jpg,gif,png"}]//Picture LimitationsSilverlight_xap_url: ' Js/moxie.xap '//Silverlight files that need to be configured when you need to upload using Silverlight mode    }); //Call the Init () method on the instance object to initialize itUploader.init (); //image selection Complete triggerUploader.bind (' filesadded ',function(Uploader,files)    {           }); //image upload successfully triggered, Ps:data is the return value (the third parameter is the return value)Uploader.bind (' fileuploaded ',function(Uploader,files,data)    {    }); //will be triggered during the file upload process, you can use this event to display the upload progress monitoring (such as upload progress)Uploader.bind (' uploadprogress ',function(Uploader,file){           }); //There are more than n ..., specific reference links ==>http://www.sojson.com/jc_plupload.html various event descriptions. Finally register the event with the "Start upload" buttondocument.getElementById (' Start_upload '). onclick =function() {uploader. Start ();//call the Start () method of the instance object to start uploading the file, and of course you can call the method elsewhere    }    </script></body>

This code came from somewhere else copy and I made a few changes.

Here to make it clear that, to master plupload upload, you have to master its various events, details of the event refer to http://www.sojson.com/jc_plupload.html of the various event description.

The focus is on the event, the return value of the backend after success, and the status and head information of the plupload. This is rarely explained in other blogs.

// image upload successfully triggered, Ps:data is the return value (the third parameter is the return value)uploader.bind (' fileuploaded ',function(uploader,files,data {    /* *    Uploader: Object of the current instance,    files: Uploaded file    data: Return value     */} );

The parameter is not rated name , only the position. The third parameter is a background return value.

OK, speaking of here, the general use of no problem, there are problems refer to http://www.sojson.com/jc_plupload.html to plupload introduction.

Plupload Multi-instance upload

We often have the need for a page with multiple images uploaded to the place.

Demand 1: such as restaurant add staff, need to upload ID card, Avatar, health certificate and so on, there are 3 places. And we want to 3 upload to a picture one by one corresponding upload, this time is written 3 times is sure to solve.

Demand 2: The premise and Demand 1, but upload the trigger way there are many, such as click on the image location can be uploaded, click on the image of the "upload button" can also trigger, such as.

Click on the ID image can be uploaded, click on the "click Upload ID Front" button can also upload.

Plupload multi-instance upload scheme one.

Some students know that Plupload has a setting that can be set to an array. The following code browse_button field can be an array, that is, multiple id

var New Plupload. Uploader ({    // trigger upload Select Picture Event    Browse_button: ["cardzmbtn", "cardbmbtn", " Cardzmbtn-img "," cardbmbtn-img "],    : _upload,// server-side upload page address    max_file_size: ' 2MB ',// Limited to 2MB    filters: [{title: "Image Files", Extensions: "Jpg,gif,png"}]// picture Limit });

Here is a flaw is, if the corresponding upload image button processing different callback events, may be a bit out of the way, I also console.log(uploader) object to look closely, there is no trigger upload id element storage, if there is resolved.

Plupload Multi-instance upload scenario two.

I am currently the choice of this scheme, the reason is that I want to different events to do different processing, such as upload ID on the case, I need to upload the front and back, upload successful enough to upload the image to the corresponding location. Look at the code:

Javascript Code:

//the ID of the triggervarids =New Array("Cardzmbtn", "cardbmbtn", "cardzmbtn-img", "cardbmbtn-img");$. each(IDs,functionIN) {    varSelf = this.toString (); //instantiate an Plupload upload object    varuploader =NewPlupload.Uploader ({Browse_button: Self,//the button that triggers the File selection dialog box, which is the element IDURL: _upload,//server-side upload page addressMax_file_size: ' 2MB ',//limit to 2MBFilters: [{title: "Image Files", Extensions: "Jpg,gif,png"}]//Picture Limitations    }); //Call the Init () method on the instance object to initialize itUploader.init (); //bind various events and do what you want to do in the event listener functionUploader.bind (' filesadded ',function(Uploader,files) {Uploader.start ();    }); Uploader. bind (' fileuploaded ',function(Uploader,files,data) {        varImgurl = "http://cdn.sojson.com/"; //here to get the ID of the picture        varid = self.search ("-img") = = -1?self + "-img":Self ; Console.Log("Now on the uploaded ID is:", Self.search (' cardzmbtn ') ==0? " Positive ': ' anti ', ' face '); //Success Judgment        if(Data.status = = 200) {Data= $.parsejson (data.response); varImagePath = Imgurl + data.file            //Picture Assignmentdocument.getElementById (id). src =ImagePath; //Front            if(Self.search (' cardzmbtn ') ===0){                $("#cardzmbtn-input"). Val (ImagePath). attr (' Src-data ', data.file); }Else{//Reverse$ ("#cardbmbtn-input"). Val (ImagePath). attr (' Src-data ', data.file); }        }    });});

Html Code:

<!--ID upload--><divclass= "Regcon mt15" id= "Step1" style= "Display:block" > <divclass= "Acctitle" > ID verification </div><br>Please upload the PRC second-generation ID card within the validity period,<br>please upload less than 2M and can clearly see the ID card above the characters and numbers of the picture. <divclass= "Sfzdiv mt15 clearfix" > <divclass= "Sfzbox fl" > <!--<spanclass= "Sfz-m-t" > Front </span>--> <divclass= "Sfz-img" > <!--ID upload--<!--ID Pass--- <divclass= "Cardzmbtn" id= "cardzmbtn" > click Upload ID front </div> <divclass= "Sfz-zk" style= "Display:none" > <pclass= "F_12" > ID card front uploaded </p> <pclass= "F_10" ><iclass= "Sfz-right" ></i> Audit passed </p> <pclass= "Txt-c" ><spanclass= "A_upagin" > re-upload </span></p> </div> </div> </div> <divclass= "Sfzbox sfz-fm fr" > <!--<spanclass= "Sfz-m-t" > Back </span>--> <divclass= "Sfz-img" > <!--ID not passed-- <divclass= "Cardbmbtn" id= "cardbmbtn" > click Upload id back </div> <divclass= "Sfz-zk" style= "Display:none" > <pclass= "F_12" > ID back uploaded </p> <pclass= "F_10" ><iclass= "Sfz-woring" ></i> audit not passed </p> <pclass= "Txt-c" ><spanclass= "A_upagin" > re-upload </span></p> </div> </div> </div> <!--positive Provincial certificate value: Full address, Src-data: address without domain name--<input type= "hidden" id= "Cardzmbtn-input" > <!--Reverse Province Certificate value: Full address, Src-data: address without domain name--<input type= "hidden" id= "Cardbmbtn-input" > </div> <!--bottom Border -<divclass= "Botton-border mt50" > <a href= "javascript:void (0);" id= "NEXTSTEP02"class= "A_blue mt15" > Next </a> </div> <divclass= "Layer" ></div></div>

Upload when the choice is the positive ID upload, the result will be uploaded images to the front of the position, and the address assigned to <input type="hidden" id="cardzmbtn-input"> the value . The opposite is displayed in the opposite position, and the image path is assigned to <input type="hidden" id="cardbmbtn-input"> medium. There is no upload positive and negative ID card business judgment to use it to judge.

Plupload upload detailed explanation, Plupload multi-instance upload, plupload multiple upload button--Recommended use

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.