使用WebUploader实现上传文件功能（一）

时间：2021-05-19

写在前面：

　　文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下WebUploader，先从简单的上传文件开始吧。

　　在代码中写注释，这样看的比较好点，那就直接上代码来看了解实现的过程吧。

前台jsp页面：

<%@ 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(); //网站的访问跟路径 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL);%><html><head> <title>WebUploader文件上传简单示例</title> <%--引入css样式--%> <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> <%--引入文件上传插件--%> <script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script> <script type="text/javascript"> $(function(){ var uploader = WebUploader.create({ // swf文件路径 swf: '${baseURL}/webuploader0.1.5/Uploader.swf', // 文件接收服务端。 server: '${baseURL}/uploadFile', // [默认值：'file'] 设置文件上传域的name。 fileVal:'upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: { multiple: false, id: '#filePicker' }, // 上传并发数。允许同时最大上传进程数[默认值：3] 即上传文件数 threads: 1, // 自动上传修改为手动上传 //auto: true, //是否要分片处理大文件上传。 //chunked: true, // 如果要分片，分多大一片？ 默认大小为5M. //chunkSize: 5 * 1024 * 1024, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ //resize: false }); //当有文件添加进来的时候 uploader.on('fileQueued', function (file) { //具体逻辑根据项目需求来写 这里只是简单的举个例子写下 $one = $("<div >"+file.name+"</div>"); $("#fileList").append($one); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { // 具体逻辑... }); // 文件上传成功处理。 uploader.on('uploadSuccess', function (file, response) { // 具体逻辑... console.log('upload success...\n'); }); // 文件上传失败处理。 uploader.on('uploadError', function (file) { // 具体逻辑... }); // 上传传完毕，不管成功失败都会调用该事件，主要用于关闭进度条 uploader.on('uploadComplete', function (file) { // 具体逻辑... }); //点击上传按钮触发事件 $("#btnClick").click(function(){ uploader.upload(); }); }); </script></head><body style="padding:10px"><div id="layout1"> <div id="uploader-demo"> <%--用来装 显示上传文件名称的div--%> <div id="fileList" class="uploader-list"></div> <div id="filePicker" >选择文件</div> <button id="btnClick">开始上传</button> </div></div></body></html>

后台action:

/** * Description:com.ims.action * Author: Eleven * Date: 2017/12/26 10:50 */@Controller("FileAction")public class FileAction extends BaseAction{ //记得提供对应的get set方法 //上传文件对象(和表单type=file的name值一致，在jsp页面我们指定了fileVal:'upload',) private File upload; //文件名 private String uploadFileName; //上传类型 private String uploadContentType; public void uploadFile() throws Exception{ String str = "D:/upload33/"; //文件保存路径 System.out.println("文件路径===="+uploadFileName); String realPath = str + uploadFileName; File tmp =new File(realPath); FileUtils.copyFile(upload, tmp); System.out.println("上传文件"+uploadFileName+",大小："+(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; }}

struts.xml文件的配置：

<action name="uploadFile" class="FileAction" method="uploadFile"> </action>

现在可以运行了，这个只是用WebUploader来实现的一个最基本的文件上传了。在jsp页面跟后台action中，都谈不上有什么逻辑，也不是很完整。因为项目不同，业务流程也不同，故可以先入门，后续根据自己的需求，进行添加的。

运行截图：

之后继续整理实现分片断点上传的文章。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章