使用WebUploader实现上传文件功能（一）
更新时间：2018年01月26日 16:07:18 作者：蚊蚊蚊蚊蚊170624
这篇文章主要为大家详细介绍了使用WebUploader实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
写在前面：
文件上传方式很多的，对于大文件的上传，在本次项目中也有涉及，主要是用了分片断点上传大文件。所以就去了解了一下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(){
/*
对于uploader的创建，最好等dom元素也就是下面的div创建好之后再创建，因为里面有用到选择文件按钮，
不然会创建报错，这是很容易忽视的地方，故这里放到$(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中，都谈不上有什么逻辑，也不是很完整。因为项目不同，业务流程也不同，故可以先入门，后续根据自己的需求，进行添加的。
运行截图：
之后继续整理实现分片断点上传的文章。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
mybatis mapper.xml中如何根据数据库类型选择对应SQL语句
这篇文章主要介绍了mybatis mapper.xml中如何根据数据库类型选择对应SQL语句，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
SpringBoot中使用HTTP客户端工具Retrofit
这篇文章主要为大家介绍了SpringBoot中使用HTTP客户端工具Retrofit方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要给大家介绍了关于Java中字节流文件读取的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用java具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
本文整合了一个spring和atomikos的demo,并且通过案例演示说明atomikos的作用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
java中form以post、get方式提交数据中文乱码问题总结
这篇文章主要介绍了java中form以post、get方式提交数据中文乱码问题总结,需要的朋友可以参考下2014-10-10
这篇文章主要为大家介绍了java开发RocketMQ生产者高可用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文主要介绍了Springboot项目启动成功后可通过五种方式继续执行,主要包括CommandLineRunner接口,ApplicationRunner接口,ApplicationListener接口,@PostConstruct注解,InitalizingBean接口,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了微信小程序之搜索分页功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Java关键词final解读,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
Minio是一个开源的分布式对象存储系统,它允许用户在存储服务上存储和检索数据,下面这篇文章主要给大家介绍了关于Java大文件分片上传(minio版)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
最新评论