How to Use the FileUpload custom template of the JS Upload Component. Upload the fileupload component.

How to Use the FileUpload custom template of the JS Upload Component. Upload the fileupload component.

FileUpload is a large File Upload Component written in pure javascript abroad. It supports multipart upload, resumable upload, and multi-file functions.
Next we will share with you the usage of the FileUpload Upload Component custom template (FineUploaderBasic:

The configuration code is as follows:

Frontend Configuration:

<! -- Define button --> <div id = "basic_uploader_fine"> <I class = "icon-upload icon-white"> </I> select a 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 upload </div> <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: 'server/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, Default concurrency: 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 ('<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 bar onPro Gress: 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 ('< img src = "http://www.bkjia.com/uploads/allimg/160515/011124F60-0.gif" width = "50px" height = "50px;" alt = "In progress. please hold. "> '+' upload file ...... '+ progress);} else {$ (' # file-'+ id ). add Class ('alert-info '). html (' '+' upload file ...... ') ;}}, // onComplete: function (id, fileName, responseJSON) {if (responseJSON. success) {var img = responseJSON ['target'] $ ('# file-' + id ). removeClass ('alert-info '). addClass ('alert-success '). html ('<I class = "icon-OK"> </I> '+' The upload is successful! '+ 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) ;},}}); // 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.