Written before:
There are many ways to upload files. For the upload of large files, it is also involved in this project, mainly using fragmentation and breakpoints to upload large files. So I went to learn about WebUploader and started with a simple upload of files.
Write comments in the code, which makes it better to read, so just go to the code to understand the implementation process.
Front desk jsp page:
<%@ page contentType="text/html;charset=UTF-8" language="java" %><% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //Website access and path String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL);%><html><head> <title>Simple example of uploading a file in WebUploader</title> <%--Introducing css style--%> <link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="external nofollow" rel="stylesheet" type="text/css"/> <script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> <%-Introducing file upload plugin--%> <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script> <script type="text/javascript"> $(function(){ /* For the creation of uploader, it is best to wait until the dom element is created, that is, the following div is created, because the button to select the file is used, otherwise an error will be created. This is a place that is easy to ignore, so I put $(function(){} here to create */ var uploader = WebUploader.create({ // swf file path swf: '${baseURL}/webuploader0.1.5/Uploader.swf', // File receiving server. server: '${baseURL}/uploadFile', // [Default: 'file'] Set the name of the file upload domain. fileVal:'upload', // Select the file button. Optional. // Created internally according to the current run, which may be an input element or flash. Pick: { multiple: false, id: '#filePicker' }, // Number of upload concurrents. The maximum number of upload processes allowed at the same time [Default: 3], that is, the number of uploaded files threads: 1, // Automatic upload is modified to manually upload //auto: true, // Do you want to handle large file uploads in pieces? //chunked: true, // If you want to shard, how big is the slice? The default size is 5M. //chunkSize: 5 * 1024 * 1024, // No image is compressed. If it is jpeg by default, it will compress it before uploading the file before uploading! //resize: false }); //When a file is added, uploader.on('fileQueued', function (file) { //Written the specific logic according to the project requirements. Here is just a simple example. Write $one = $("<div >"+file.name+"</div>"); $("#fileList").append($one); }); // Create a progress bar to display in real time during file uploading. uploader.on('uploadProgress', function (file, percentage) { // Specific logic... }); // File upload is successfully processed. uploader.on('uploadSuccess', function (file, response) { // Specific logic... console.log('upload success.../n'); }); // File upload failed processing. uploader.on('uploadError', function (file) { // Specific logic... }); // After uploading and uploading, the event will be called regardless of success or failure. It is mainly used to close the progress bar uploader.on('uploadComplete', function (file) { // Specific logic... }); // Click the upload button to trigger the event $("#btnClick").click(function(){ uploader.upload(); }); }); </script></head><body style="padding:10px"><div id="layout1"> <div id="uploader-demo"> <%---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Backend action:
/** * Description:com.ims.action * Author: Eleven * Date: 2017/12/26 10:50 */@Controller("FileAction")public class FileAction extends BaseAction{ //Remember to provide the corresponding get set method//Upload the file object (the same as the name value of form type=file. On the jsp page, we specified fileVal:'upload',) private File upload; //File name private String uploadFileName; //Upload type private String uploadContentType; public void uploadFile() throws Exception{ String str = "D:/upload33/"; //File saving path System.out.println("File path===="+uploadFileName); String realPath = str + uploadFileName; File tmp = new File(realPath); FileUtils.copyFile(upload, tmp); System.out.println("Upload file"+uploadFileName+", size: "+(upload.length()/1024/1024)+"M"); } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String getUploadContentType() { return uploadContentType; } public void setUploadContentType(String uploadContentType) { this.uploadContentType = uploadContentType; }}Configuration of struts.xml file:
<action name="uploadFile" method="uploadFile"> </action>
Now it can be run, this is just a basic file upload implemented using WebUploader. There is no logic in the jsp page and the background action, and it is not very complete. Because the projects are different and the business processes are different, you can get started first and then add them according to your needs.
Running screenshot:
Then continue to organize articles that implement fragmented breakpoint uploads.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.