Webuploader Upload File Plugin

In Jane made the forum to say, can be published text and Pictures said, in the picture said that hope can upload more than one picture at the same time, so the use of Webuploader plug-ins.

The plugin can be used to preview pictures before uploading images, can limit the size of a single file and single upload pictures, support file selection, type filter, drag, picture paste.

Add code where the page needs to be: <div id= "Container" > <div id= "uploader" >               &NBS P <div class= "Queuelist" >                     <div id= "Dndarea" C lass= "placeholder" >                         <div id= "fil Epicker "></div>                         <p> or photos Drag here to select up to 9 sheets, single file size not exceeding 2m</p>                     </div> &NB Sp               </div>                 < Div class= "StatusBar" style= "Display:none;" >                     <div class= "Progress" >     &NBS P                   <span class= "text" >0%</span>                         <span class= "Percentage" ></span>                     </div><div class= "info" &G t;</div>                     <div class= "Btns" >   &nbsp ;                     <div id= "FilePicker2" ></div><div clas s= "UPLOADBTN" > Release </div>                     </div>                 </div>             </div> &nbsp ;           </div>             <script src= "/javascript/webu Ploader/upjquery.js "type=" Text/javascript "></script>     <script type=" Text/javascript "src=" /javascript/webuploader/weBuploader.js "></script>     <script type=" Text/javascript "src="/javascript/webuploader/ Upload.js "></script>
Load CSS file: <link rel= "stylesheet" type= "Text/css" href= "/css/webuploader.css"/> <link rel= "stylesheet" type= "t Ext/css "href="/css/uploadstyle.css "/>
Instantiate uploader (in uploader.js) after page load completes  //instantiation         uploader = webuploader.create ({  &NBSP ;         pick: {     //Select Picture button                 I D: ' #filePicker ',                 Label: ' Click to select Picture '         &NBS P  },             FormData: {   //upload images with parameters         &NB Sp       uid:123            },             DND: ' #dndArea '      //designation can be dragged container             paste: ' #uploader ',     &N bsp;//Monitor Paste event container             SWF: './uploader.swf ',  //swf             Chunked:false,          /Whether fragment upload             ChunkS IZE:512 * 1024,  //fragmentation size             server: '/gagbbs/uploadfile ',///uploading file server
Accept: {//allowable file type title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', Mimetypes: ' image/* '}, Disableglobaldnd:true,//Prohibit global drag-and-drop function.             This does not appear when the picture dragged into the page, the picture open. Filenumlimit:9,//Uploading files filesizelimit:200 * 1024 * 1024,//M upload file Total size Filesingl ESIZELIMIT:2 * 1024 * 1024//2 M Single File size});
When I was publishing a picture and talking about it, pictures need to correspond to say the ID, so upload the picture before the post table insert a new said data and return the corresponding ID as a picture of the accompanying parameters uploaded to the service side: to uploader execution picture upload before inserting a piece of code: $upload. On ('             Click ', function () {if ($ (this). Hasclass (' disabled ')} {return false; }
if (state = = = ' ready ') {var cont=$ ("#printcont"). Val (); $.ajax ({///insert a new said data and return ID type: "POST", url: "/gagbbs/printinfo", Data: "Cont=" +con             T, Success:function (msg) {var ms=eval (' (' +msg+ ') '); var id=ms["Postingid"];
Add the attached parameter Uploader.options.formData.pid = ID to the uploaded picture;
Upload picture uploader.upload ();             }             });             else if (state = = = ' paused ') {uploader.upload ();             else if (state = = = ' uploading ') {uploader.stop (); }         }); Server-side/gagbbs/uploadfile returns JSON data, uploader to determine the return result of the server based on the Uploadaccept event
Uploader.on (' uploadaccept ', function (file, response) {if (response.code==1) {//through retur                 n false to tell the component, this file upload error.             return false; }         });
Related swf,js and CSS file download address used: http://pan.baidu.com/s/1gdf5cI3