Build your own Wheels. upload control

Objective:

The project needs to use the upload plugin, the Internet to find a lot of Three-party plug-ins are product pass

The webiploader was found in the back and a modular package was made for Him.

Modular management of 1.js

The requier.js is used in this article to Manage. As for how to use everyone can baidu!

It is mainly based on webiploader, and then some style processing is DONE.

First on One:

Two parameters and one configuration parameter were Accepted.

If the configuration parameter does not pass, there will be a default Value.

Attached code

1Define ([' jquery ', ' Webuploader '),function($, Webuploader) {2"use strict";3     /*4 upload Control by shumin 2016-11-255 ist picture display Area ID6 Pick upload button Area ID7 opts Control parameters8     */9     Ten      one     functionMywebuploader (list,pick, opts) { a          this. $list =$ (list); -          this. $pick =$ (pick); -          this.$ = $; the          this. opts =$.extend ({}, mywebuploader.defaults, opts); -  -          this. Init (); -  +          -  +  a     } atMywebuploader.defaults = { -Type: ' WebFile ',//upload type (different type of Save Path) -filenumlimit:1,//Upload Quantity -thumbnailwidth:90,//thumbnail width -Thumbnailheight:90//High thumbnail image -     } inMyWebUploader.prototype.init =function () { -         varSelf = this; to  +           -             //optimize retina, under Retina This value is 2 the         varRatio = Window.devicepixelratio | | 1, *             //Thumbnail size $Thumbnailwidth = Self.opts.thumbnailWidth *ratio,Panax NotoginsengThumbnailheight = Self.opts.thumbnailHeight *ratio, -  the             //Web Uploader Instances + uploader; auploader =webuploader.create ({ the             //whether the file is automatically uploaded after you finish selecting it.  +Autofalse, -  $Disableglobaldnd:true, $             //swf file path -Swf: '/img/js/plugin/webuploader/uploader.swf ', -  the             //the file receives the service Side.  -Server: '/api/upload?type= ' +self.opts.type,Wuyi  the             //Select the button for the File. Optional.  -             //the internal is created according to the current run, either the INPUT element or Flash. wu pick:self. $pick, - fileNumLimit:self.opts.fileNumLimit, about             //allow only pictures to be selected $ Accept: { -Title: ' Images ', -Extensions: ' Gif,jpg,jpeg,bmp,png ', -Mimetypes: ' image/* ' a             } +  the         }); -  $         //when there are files to add in theUploader.on (' filequeued ',function(file) { the             var$li = $( the' <div id= ' + file.id + ' "class=" cp_img "> ' + the'  ' + -' <div class= ' Cp_img_jian ' ></div></div> ' in                     ), the$img = $li. Find (' img '); the  about  the             //$list as a container jquery instance the self . $list. Append ($li); the  +             //Create a thumbnail image -             //If you are not a picture file, you can not call this Method.  the             //thumbnailwidth x thumbnailheight for xBayiUploader.makethumb (file,function(error, Src) { the                 if(error) { the$img. replacewith (' <span> cannot preview </span> '); -                     return; -                 } the  the$img. attr (' src ', src); the }, thumbnailwidth, thumbnailheight); the uploader.upload (); -         }); the  the         //Create a progress bar in real-time display during file Upload.  theUploader.on (' uploadprogress ',function(file, Percentage) {94             var$li = $ (' # ' +file.id), the$percent = $li. Find ('. progress span '); the  the             //Avoid duplicate creation98             if(!$percent. Length) { about$percent = $ (' <p class= "progress" ><span></span></p> ") - . AppendTo ($li)101. Find (' Span ');102             }103 104$percent. css (' width ', percentage * 100 + '% '); the         });106 107         //File Upload succeeded, Add success class to item, upload success with style Tag. 108Uploader.on (' uploadsuccess ',function(file, Response) {109             if(response. Status = = 1) { the 111                 //$ (' # ' + file.id). children (' img '). attr (' src ', response. Message); the             }113$ (' # ' + file.id). addclass (' upload-state-done ')); the         }); the  the         //File upload failed, display upload Error. 117Uploader.on (' Uploaderror ',function(file) {118             var$li = $ (' # ' +file.id),119$error = $li. Find (' div.error '); - 121             //Avoid duplicate creation122             if(!$error. Length) {123$error = $ (' <div class= ' error ' ></div> '). appendTo ($li);124             } the 126$error. text (' upload failed ');127         }); - 129         //finished uploading, success or failure, first delete the progress bar.  theUploader.on (' uploadcomplete ',function(file) {131$ (' # ' + file.id). find ('. Progress ')). Remove (); the         });133 134         //All files uploaded135Uploader.on ("uploadfinished",function () {136             //Submit Form137 138         });139  $         //Start uploading141$ ("#ctlBtn"). Click (function () {142 uploader.upload ();143 144         });145 146         //Show Delete button147 148$ (document). on (' mouseover ', '. cp_img ',function () {149$( this). children (". cp_img_jian"). css (' display ', ' block '); max         })151         //Hide Delete button the$ (document). on (' mouseout ', '. cp_img ',function () {153$( this). children (". cp_img_jian"). css (' display ', ' None '));154         })155 156 157         //Execute Delete method158Self. $list. on ("click", ". cp_img_jian",function () {159             varId = $ ( this). Parent (). attr ("id"); theUploader.removefile (uploader.getfile (Id,true));161$( this). Parent (). Remove ();162         });163 164     }165 166 167     return{168 Mywebuploader:mywebuploader169     }  the})

After the call is convenient, do not need to write a large lump of configuration items each time

Paste the page code

Build your own Wheels. upload control