FileUpload the use of the Upload Component custom template (Fineuploaderbasic)

Source: Internet
Author: User

FileUpload fineuploaderbasic (custom template) configuration

FileUpload is a foreign pure JavaScript written by the large file upload component, the component supports multipart upload, breakpoint continuation, multi-file, cross-domain and other functions.
Here is the configuration code:

Front-end configuration:

<!--define Buttons --<div id="Basic_uploader_fine"><i class="Icon-upload icon-white"></i>Select File</div><div id="Triggerupload">Click Upload</div><!--display information --<div id="Messages"></div><div id="Cancelupload" class="Buttons">Cancel</div><div id="Cancelall" class="Buttons">Cancel All</div><div id="Pauseupload" class="Buttons">Pause upload</div><div id="Continueupload" class="Buttons"> Continue uploading</div><script>$ (document). Ready ( function() {$fub = $ (' #basic_uploader_fine '); $messages = $ (' #messages ');varuploader =NewSql Fineuploaderbasic ({debug:true,//Turn on Debug modeMultiple:true,//Multiple file uploadButton: $fub [0],//Upload buttonAutoupload:false,//Do not upload automatically, call the Uploadstoredfiless method to upload manually        //Verify upload fileValidation: {allowedextensions: [' JPEG ',' jpg ',' PNG ',' Zip ',' rar '],        },//cross-domain ConfigurationCors: {expected:true, Sendcredentials:true, ALLOWXDR:true},//Remote request address (relative or absolute address)Request: {endpoint:' server/endpoint.php '}, Retry: {enableauto:false //defaults to False Auto retry}, chunking: {enabled:true, Partsize: -,//Packet size, default is 2MConcurrent: {enabled:true //Turn on concurrent packet uploads, default concurrency of 3}, Success: {endpoint:"Server/endpoint.php?done" //packet upload completed after processing}        },//callback functionCallbacks: {//File start uploadOnSubmit: function(ID, fileName) {$messages. Append (' <div id= ' file-'+ ID +' "class=" alert "style=" margin:20px 0 0 ">"+filename+' </div> '); }, Onupload: function(ID, fileName) {$(' #file-'+ ID). addclass (' Alert-info '). HTML ('  '+' Initializing '+' "'+ FileName +' "'); },//progress barOnProgress: function(ID, fileName, Loaded, total) {          if(Loaded < total) {progress =Math. Round (Loaded/total * -) +'% of '+Math. Round (Total/1024x768) +' KB '; $(' #file-'+ ID). Removeclass (' Alert-info '). HTML ('  '+' upload files ... '+ progress); }Else{            $(' #file-'+ ID). addclass (' Alert-info '). HTML ('  '+' upload file ... '); }        },//After upload is completeOnComplete: function(ID, fileName, Responsejson) {          if(responsejson.success) {varIMG = responsejson[' target ']            $(' #file-'+ ID). Removeclass (' Alert-info '). AddClass (' alert-success '). HTML (' <i class= ' icon-ok ' ></i> '+' upload success! '+' "'+ FileName +' "'); }Else{            $(' #file-'+ ID). Removeclass (' Alert-info '). AddClass (' Alert-error '). HTML (' <i class= ' icon-exclamation-sign ' ></i> '+' Error with '+' "'+ FileName +' ": '+ Responsejson.error); }}, OnError: function(ID, name, reason, Maybexhrorxdr) {Console.log (ID +' _ '+ name +' _ '+ reason); },            }         });//Trigger upload upload manually$(' #triggerUpload '). Click ( function() {Uploader.uploadstoredfiles (); });//Cancel an upload$(' #cancelUpload '). Click ( function() {Uploader.cancel (0); });//Cancel all files that have not been uploaded$(' #cancelAll '). Click ( function() {         //Single file upload does not work because it is already uploaded cannot use this cancelall to cancel the uploadUploader.cancelall (); });//Pause uploading a file$(' #pauseUpload '). Click ( function() {Uploader.pauseupload (0); });//Continue uploading$(' #continueUpload '). Click ( function() {Uploader.continueupload (0); });});</script>

PHP (endpoint.php) Code:

//handler.php file under the official websiterequire_once "handler.php"; Header"Expires:mon, 1997 05:00:00 GMT"); Header"last-modified:". Gmdate ("D, D M Y h:i:s") ."GMT"); Header"Cache-control:no-store, No-cache, must-revalidate"); Header"cache-control:post-check=0, pre-check=0",false); Header"Pragma:no-cache"); Header"Access-control-allow-origin:http://file.com");//Cross domain domain name and cannot be a wildcardHeader"Access-control-allow-methods:get, post"); Header"Access-control-allow-headers:origin, X-requested-with, Content-type, Accept,cache-control"); Header' Access-control-allow-credentials:true ');$uploader=NewUploadhandler ();//File type restrictions$uploader->allowedextensions =Array();//File size limit$uploader->sizelimit =NULL;//Upload file box$uploader->inputname ="Qqfile";//Define grouping file storage location$uploader->chunksfolder ="Chunks";$method=$_server["Request_method"];//Upload destination folder (because the original file storage rules do not meet our needs, so modified handler.php code added a folder generation rule "You can also customize")$uploadDirectory=$uploader->getpathname (' Member_avatar ');if($method=="POST") {Header ("Content-type:text/plain");//Group merge after the upload is complete    if(isset($_get["Done"])) {$result=$uploader->combinechunks ($uploadDirectory);//merge grouped files}Else{//Start uploading Files        $result=$uploader->handleupload ($uploadDirectory);//Get the name of the upload        $result["Uploadname"] =$uploader->getuploadname (); }EchoJson_encode ($result);}//delete file processingElse if($method=="DELETE") {$result=$uploader->handledelete ($uploadDirectory);EchoJson_encode ($result);}Else{Header ("http/1.0 405 Method not allowed");}

The above is a simple custom template configuration, if there are other requirements please see the document Custom template parameters, method description
My level is limited if there is a mistake welcome point!

FileUpload the use of the Upload Component custom template (Fineuploaderbasic)

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.