JS Upload component FileUpload Custom template usage _javascript tips

FileUpload is a foreign pure JavaScript write large file Upload component, the component support fragment upload, breakpoint continued transmission, multiple files and other functions.
Here's how to share the FileUpload Upload Component customization Template (Fineuploaderbasic):

The following is the configuration code:

Front-End configuration:

<!--definition button--> <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" > Suspend upload </div> <div id= "Continueupload" class= "buttons" > Continue uploading
 </div> <script> $ (document). Ready (function () {$fub = $ (' #basic_uploader_fine ');

 $messages = $ (' #messages '); var uploader = new QQ. Fineuploaderbasic ({debug:true,//Open debug mode multiple:true,//Multiple File Upload button: $fub [0],//Upload button autoupload:false,// Do not automatically upload the call uploadstoredfiless method manually upload//verify upload file validation: {allowedextensions: [' jpeg ', ' jpg ', ' png ', ' zip ', ' rar '] ,},//Remote request address (relative or absolute address) Request: {endpoint: ' server/endpoint.php '}, Retry: {enableauto:false//DEFA Ults to False automatically retry}, ChuNking: {enabled:true, partsize:500,//group size, default to 2M concurrent: {enabled:true//Open Concurrent group uploads, default concurrency 3},  Success: {endpoint: "Server/endpoint.php?done"///group upload completed after processing}},//callback function Callbacks: {//File started uploading OnSubmit: function (ID, fileName) {$messages. Append (' <div id= ' file-' + ID + ' "class=" alert "style=" margin:20px 0 0 ">" +fi
  lename+ ' </div> '); }, Onupload:function (ID, fileName) {$ (' #file-' + ID). addclass (' Alert-info '). html ('  ' + ' initializing ' + ' "' + FileName + '"); },//progress bar onprogress:function (ID, fileName, Loaded, total) {if (Loaded < total) {progress = Math.Round (load
   Ed/total * + '% of ' + math.round (total/1024) + ' KB '; $ (' #file-' + ID). Removeclass (' Alert-info '). html ('  ' +     ' Upload file ... ' + progress; else {$ (' #file-' + ID). addclass (' Alert-info '). html ('  ' + ' upload file ...
   '); Oncomplete:function (ID, fileName, Responsejson) {if (responsejson.success) {var img = response After the upload is completed) json[' 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-exc
   Lamation-sign "></i> ' + ' Error with ' + '" ' + FileName + ' ": ' + responsejson.error";
  }, Onerror:function (ID, name, reason, maybexhrorxdr) {console.log (id + ' _ ' + name + ' _ ' + reason);

 },  
  }  
 }); Manually trigger upload upload $ (' #triggerUpload '). ClIck (function () {uploader.uploadstoredfiles ();
 });
 Cancel one upload $ (' #cancelUpload '). Click (function () {uploader.cancel (0);
 });
 Cancels all files that are not uploaded $ (' #cancelAll '). Click (function () {//Single file upload does not work because the upload cannot use this cancelall cancel upload uploader.cancelall ();
 });
 Suspends uploading of a file $ (' #pauseUpload '). Click (function () {uploader.pauseupload (0);
 });
 Continue to upload $ (' #continueUpload '). Click (function () {uploader.continueupload (0);
});
});

 </script>

PHP Code:

handler.php file official online require_once "handler.php";
$uploader = new Uploadhandler (); 
File type limit $uploader->allowedextensions = Array ();
File size limit $uploader->sizelimit = null;
Upload file box $uploader->inputname = "Qqfile";
Defines the location of the grouping file $uploader->chunksfolder = "chunks";

$method = $_server["Request_method"]; Upload destination folder (because the original file storage rules do not meet our requirements 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 if (Isset ($_get["Done")) {$result = $uploader->combinechunks ($uploadDirectory);//merge group file} El
  SE {//start uploading file $result = $uploader->handleupload ($uploadDirectory);

 Gets the name of the upload $result ["uploadname"] = $uploader->getuploadname ();
echo Json_encode ($result);
 }//delete file processing else if ($method = = "Delete") {$result = $uploader->handledelete ($uploadDirectory);
echo Json_encode ($result);

 else {header ("http/1.0 405 Method not allowed");}

The above is a simple custom template configuration, I hope to help you learn.