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

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)