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

Source: Internet
Author: User

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.

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.