Webuploader file image upload plugin use

Recently in the project to use the Baidu file image upload plugin webuploader. Share to everyone

Need to click on http://fex.baidu.com/webuploader/download.html to open the link to download Webuploader

/*image Upload*/    var$ =JQuery, $img=$("#imagePath_img"),    //optimize retina, under Retina This value is 2Ratio = Window.devicepixelratio | |1,    //Thumbnail sizeThumbnailwidth =1*ratio, Thumbnailheight=1*ratio,//Web Uploader InstancesUploader;//initializing web uploader*** uploading picturesuploader =webuploader.create ({//whether the file is automatically uploaded after you finish selecting it. Autotrue,    //swf file pathSwf:'${basepath}/scripts/jquery/plugins/webuploader/uploader.swf',    // //the file receives the server address, and the auto-generated thumbnail requires the backend to complete. Server'${basepath}/policy/policyfileaction_add.do?policyfile.policyid='+$("#policyId_hidden"). Val () +'&policyfile.originalid='+$("#originalId_hidden"). Val () +'&policyfile.type=0',    //or Example: Server: '/common/uploadfile?imagezip=1 ',//Select the button for the file.    Optional. //The internal is created according to the current run, either the INPUT element or flash.Pick'#sendimg', Filenumlimit:5,    //Allowmagnify:false,Duplicatetrue,//allow uploading of duplicate files//only the image file is allowed to be selected. accept:{Title:'Images', Extensions:'Gif,jpg,jpeg,bmp,png', Mimetypes:'image/*'}}); Uploader.on ("Error", function (type) {if(type=="q_type_denied") {dialogmsg ('please upload jpg, JPEG, PNG, BMP format Files! ',0); }});//when there are files to add inUploader.on ('filequeued', function (file) {var$li = $(            '<div style= "float:right" id= "'+ File.id +'"class=" > "Delimg "'+'<div class= "closeimg" >x</div>'+'</div>'), $img= $li. Find ('img'); //$list as a container jquery instance$("#piccon"). Append ($li); //Create a thumbnail image//If you are not a picture file, you can not call this method. //thumbnailwidth x thumbnailheight for xuploader.makethumb (file, function (Error, SRC) {if(Error) {$img. ReplaceWith ('<span> cannot preview </span>'); return; } $img. attr ('src', SRC); },  -, -);//can be written as Thumbnailwidth, Thumbnailheight$li. On ('Click', Function () {$ ( This). Remove (); })});//Create a progress bar in real-time display during file upload. Uploader.on ('uploadprogress', function (file, percentage) {var$li = $ ('#'+file.id), $percent= $li. Find ('. Progress span'); //Avoid duplicate creation    if( !$percent. Length) {$percent= $('<p class= "Progress" ><span></span></p>'). AppendTo ($li). Find ('span'); } $percent. css ('width', Percentage * -+'%' );});//file upload succeeded, add success class to item, upload success with style tag. Uploader.on ('uploadsuccess', Function (file,response) {Imgurl=response.filename;//Here you can get the name of the picture returned in the background//alert (imgurl);$('#'+file.id). addclass ('Upload-state-done');});//File upload failed, display upload error. Uploader.on ('Uploaderror', function (file) {var$li = $ ('#'+file.id), $error= $li. Find ('Div.error'); //Avoid duplicate creation    if( !$error. Length) {$error= $('<div class= "error" ></div>'). AppendTo ($li); } $error. Text ('Upload failed');});//finished uploading, success or failure, first delete the progress bar. Uploader.on ('Uploadcomplete', function (file) {$ ('#'+file.id). Find ('. Progress'). Remove ();});

Webuploader file picture upload plug-in use