How to Use the FileUpload custom template as a JS Upload Component _ javascript skills

This article describes in detail how to use the FileUpload custom template of the JS Upload Component. If you are interested, refer to FileUpload, a large File Upload Component written in pure javascript abroad, this component supports multipart upload, resumable upload, and multiple files.
Next we will share with you the usage of the FileUpload Upload Component custom template (FineUploaderBasic:

The configuration code is as follows:

Frontend Configuration:

 
Select File
Click to upload
 
Cancel
Cancel all
Pause upload
Continue upload
Script $ (document ). ready (function () {$ fub = $ ('# basic_uploader_fine'); $ messages = $ ('# messages'); var uploader = new qq. fineUploaderBasic ({debug: true, // enable debug mode multiple: true, // Multifile upload button: $ fub [0], // upload button autoUpload: false, // if the file is not automatically uploaded, call the uploadStoredFiless method to manually upload the file. // verify the Upload File validation: {allowedExtensions: ['jpeg ', 'jpg', 'png ', 'zip ', 'rar '],}, // remote request address (relative or absolute address) request: {endpoint: 'ser Ver/endpoint. php '}, retry: {enableAuto: false // defaults to false auto retry}, chunking: {enabled: true, partSize: 500, // group size, the default value is 2 M concurrent: {enabled: true // enable concurrent group upload. The default value is 3}. success: {endpoint: "server/endpoint. php? Done "// post-processing of group upload completed}, // callback function callbacks: {// file start upload onSubmit: function (id, fileName) {$ messages. append ('
'+ FileName +'
');}, 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 (loaded/total * 100) + '% of' + Math. round (total/1024) + 'kb'; $ ('# file-' + id ). removeClass ('alert-info '). html (''+ 'uploading files ...... '+ progress);} else {$ (' # file-'+ id ). addClass ('alert-info '). html (''+ 'uploading files ...... ') ;}}, // onComplete: function (id, fileName, responseJSON) {if (responseJSON. success) {var img = responseJSON ['target'] $ ('# file-' + id ). removeClass ('alert-info '). addClass ('alert-success '). html (''+' The upload is successful! '+ FileName +');} else {$ ('# file-' + id ). removeClass ('alert-info '). addClass ('alert-error '). html (''+ 'Error with' + fileName + '":' + responseJSON. error) ;}}, onError: function (id, name, reason, maybeXhrOrXdr) {console. log (id + '_' + name + '_' + reason) ;},}}); // manually trigger upload $ ('# triggerupload '). click (function () {uploader. uploadStoredFiles () ;}); // cancel an upload $ ('# cancelupload '). click (function () {uploader. cancel (0) ;}); // cancel all unuploaded files $ ('# cancelall '). click (function () {// upload of a single file does not work because cancelAll cannot be used to cancel upload uploader. cancelAll () ;}); // pause uploading a file $ ('# pauseupload '). click (function () {uploader. pauseUpload (0) ;}); // continue to upload $ ('# continueUpload '). click (function () {uploader. continueUpload (0) ;}); script

Php code:

// Handler. require_once "handler. php "; $ uploader = new UploadHandler (); // file type Limit $ uploader-> allowedExtensions = array (); // file size limit $ uploader-> sizeLimit = null; // upload the file box $ uploader-> inputName = "qqfile"; // define the location of the group file $ uploader-> chunksFolder = "chunks "; $ method = $ _ SERVER ["REQUEST_METHOD"]; // upload the destination folder (the handler is modified because the original file storage rules do not meet our requirements. php Code adds a folder generation rule [You can also customize]) $ uploadDirectory = $ uploader-> getPathName ('Member _ avatar '); if ($ method = "POST") {header ("Content-Type: text/plain "); // merge the groups after the group is uploaded. if (isset ($ _ GET ["done"]) {$ result = $ uploader-> combineChunks ($ uploadDirectory ); // merge group files} else {// start to upload files $ result = $ uploader-> handleUpload ($ uploadDirectory ); // obtain the upload name $ result ["uploadName"] = $ uploader-> getUploadName ();} echo json_encode ($ result );} // DELETE the 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, which is helpful for your learning.