FileUpload is a large file upload component written in pure javascript abroad. This component supports functions such as shard upload, breakpoint continuation, and multiple files.
Here is a way to use the FileUpload upload component custom template (FineUploaderBasic):
The following is the configuration code:
Front-end configuration:
<!--Definition button--><div id="basic_uploader_fine"><i></i>Select file</div><div id="triggerUpload">Click to upload</div><!--Show information--><div id="messages"></div><div id="cancelUpload">Cancel</div><div id="cancelAll">Cancel all</div><div id="pauseUpload">Suspend upload</div><div id="continueUpload">Continue upload</div><script> $(document).ready(function() { $fub = $('#basic_uploader_fine'); $messages = $('#messages'); var uploader = new qq.FineUploaderBasic({ debug: true, // Turn on debug mode multiple: true, // Multi-file upload button: $fub[0], //Upload button autoUpload: false, // If you do not upload automatically, call the uploadStoredFiless method to upload manually// 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 Automatically retry}, chunking: { enabled: true, partSize: 500, // Group size, default is 2M concurrent: { enabled: true // Concurrent group upload, default 3 concurrent}, success: { endpoint: "server/endpoint.php?done" // Group upload is completed after processing} }, // Callback function callbacks: { // File starts upload onSubmit: function(id, fileName) { $messages.append('<div id="file-' + id + '" style="margin: 20px 0 0">'+fileName+'</div>'); }, onUpload: function(id, fileName) { $('#file-' + id).addClass('alert-info') .html('<img src="client/loading.gif"> ' + 'Initializing ' + '"'); }, //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('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"> ' + 'Upload file...' + progress); } else { $('#file-' + id).addClass('alert-info') .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"> ' + 'Upload in the file...... '); } }, //After uploading is completed onComplete: function(id, fileName, responseJSON) { if (responseJSON.success) { var img = responseJSON['target'] $('#file-' + id).removeClass('alert-info') .addClass('alert-success') .html('<i></i> ' + 'Uploaded successfully! ' + '"' + fileName + '"' ); } else { $('#file-' + id).removeClass('alert-info') .addClass('alert-error') .html('<i></i> ' + 'Error with ' + '"' + fileName + '": ' + responseJSON.error); } }, onError: function(id, name, reason, maybeXhrOrXdr) { console.log(id + '_' + name + '_' + reason); }, } }); //Manually trigger upload to upload $('#triggerUpload').click(function() { uploader.uploadStoredFiles(); }); //Cancel a certain upload $('#cancelUpload').click(function() { uploader.cancel(0); }); //Cancel all unuploaded files $('#cancelAll').click(function() { //Single file upload has no effect because those who are already uploading cannot use this cancelAll to cancel uploader.cancelAll(); }); //Pause uploading a certain file $('#pauseUpload').click(function() { uploader.pauseUpload(0); }); // Continue to upload $('#continueUpload').click(function() { uploader.continueUpload(0); });});</script>php code:
//Handler.php file official website requires_once "handler.php";$uploader = new UploadHandler();// File type limit $uploader->allowedExtensions = array(); // File size limit $uploader->sizeLimit = null;// Upload file box $uploader->inputName = "qqfile";// Define the storage location of grouped files $uploader->chunksFolder = "chunks";$method = $_SERVER["REQUEST_METHOD"];//Upload the target folder (because the original file storage rules did not meet our needs, I modified the handler.php code and added a folder generation rule [you can also customize it]) $uploadDirectory = $uploader->getPathName('member_avatar');if ($method == "POST") { header("Content-Type: text/plain"); // Merge the group after the group upload is completed if (isset($_GET["done"])) { $result = $uploader->combineChunks($uploadDirectory); // Merge grouped files} else { //Start upload file $result = $uploader->handleUpload($uploadDirectory); // Get the uploaded name $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 it will be helpful to everyone's learning.