文件上传从web到Java
- 前言
- 一、js前端代码
- 二、后端Java代码
- eclipse中的数据源配置：在server.xml中 < Host>标签里面加上如下代码：
- IDE配置数据源
- 总结
前言
博主最近太难了，又是毕业设计又是论文，还得天天加班。都快一个月没有更新总结了，今天分享一个曾今用过的文件上传的实例，希望可以对一些小伙伴有所帮助。主要包括一个基于layui的前端文件上传的实例和后端Java操作的代码。代码和截图都会放在下面。
提示：以下是本篇文章正文内容，下面案例可供参考
一、js前端代码
示例：layui是一个前端框架，本实例需要导入layui，下载链接如下： layui下载链接:https://download.csdn.net/download/bug_producter/15491803
注意以下实例为多文件上传的实例，返回参数以下均有截图
<%--
Created by IntelliJ IDEA.
User: user-xumz
Date: 2021/3/23
Time: 18:13
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>上传文件</title>
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<link type="text/css" rel="styleSheet" href="../js/layui/css/layui.css"/>
<style type="text/css">
.layui-input-block {
margin-left: 130px;
/*min-height: 36px;*/
}
</style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">上传文件</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div style="width: 96%;position: absolute;overflow-y: auto;overflow-x: hidden;">
<div style="width: 75%; margin: 0 auto;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>选择图片上传</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var picurl = "";
layui.use(['form', 'layer', 'laydate', 'upload', 'layedit', 'element'], function () {
var form = layui.form
, layer = layui.layer
, upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '../fileUploadsImgs' //改成您自己的上传接口
, accept: 'images' //允许上传的文件类型
/* , acceptMime: 'image/!*' //只筛选图片
, exts: 'jpg|png|gif|jpeg' //允许上传的文件后缀*/
,accept: 'file'
,exts: 'txt|xls|xlsx|ppt|pptx|pdf|doc|docx'
, size: 1024*100 //最大允许上传的文件大小
, multiple: true //多文件上传
, auto: false //不自动上传
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
, '</td>'
, '</tr>'].join(''));
//上传失败后，单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
console.log(res);//返回值
// console.log(index);//上传文件的索引
// console.log(upload);//重新上传方法
console.log(res.url.saveURL);
if (res.code == 0) { //返回code==0表示上传成功
picurl = picurl + res.url.saveURL + "<&>";//保存上传地址
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件，执行后返回，不再往下继续执行
} else {
this.error(index, upload);//执行erro
}
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
</script>
</body>
</html>
如果没有jquery-1.11.0.js的用别的版本也是可以的，
二、后端Java代码
此后端代码来源于师兄的分享，如却确为网上某处原文，请联系博主，以便博主备注出处
package cn.xumz.stusystem.utils;
import com.alibaba.fastjson.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.Date;
import java.util.List;
import java.util.Random;
@WebServlet("/fileUploadsImgs")
public class FileUpload extends HttpServlet {
@SuppressWarnings("unused")
private static final Logger Log = Logger.getLogger(FileUpload.class);
private static final long serialVersionUID = 1L;
public FileUpload() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@SuppressWarnings({"unchecked"})
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //设置编码
String saveName = null;
String value = null; //获取上传文件名
String path = "F:/upImages/";//本地地址
JSONObject jsonobj = new JSONObject();
// System.out.println("---------------");
int returnTag = -1;
try {
request.setCharacterEncoding("utf-8"); // 设置编码
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
// 获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(path));
// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factory.setSizeThreshold(200 * 1024 * 1024);
// 高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> list = (List<FileItem>) upload.parseRequest(request);
for (FileItem item : list) {//获取表单的属性名字
String name = item.getFieldName();
/** 以下三步，主要获取 上传文件的名字*/
//获取上传文件名
value = item.getName();
//索引到最后一个反斜杠
int start = value.lastIndexOf("\\");
//截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = value.substring(start + 1);
String suffix = filename.substring(filename.lastIndexOf(".")); //文件后缀
// 保存后的文件名
String timeString = new Date().getTime() + "";
saveName = "x" + timeString.substring(0, 10) + getRandom() + suffix;
request.setAttribute(name, filename);
//手动写的
OutputStream out = new FileOutputStream(new File(path, saveName));
InputStream in = item.getInputStream();
int length = 0;
byte[] buf = new byte[1024];
//in.read(buf); //每次读到的数据存放在 buf 数组中
while ((length = in.read(buf)) != -1) {
//在 buf 数组中 取出数据 写到 （输出流）磁盘上
out.write(buf, 0, length);
}
in.close();
out.close();
}
JSONObject object = new JSONObject();
object.put("saveURL", (path + saveName));// 保存后的文件名
object.put("name", value); //原文件名称
jsonobj.put("code", "0");
jsonobj.put("url", object);
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
} catch (Exception e) {
Log.info("出错啦");
e.printStackTrace();
jsonobj.put("code", "-1");
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
}
}
//生成随机数
public String getRandom() {
String sjs = "";
String s = "123456789";
char[] c = s.toCharArray(); //将字符串转换为字符数组
Random random = new Random(); //
for (int i = 0; i < 6; i++) {
sjs = c[random.nextInt(c.length)] + sjs;
}
return sjs;
}
}
Java代码需要导入以下3个jar: 
点击下载所需jar，https://download.csdn.net/download/bug_producter/16732446) 运行效果截图如下：
上传成功，会返回code=0以及文件保存的地址。注意： 
这里的地址是你本机的地址，项目部署到服务器上后改为服务器上地址即可。如果要在项目里访问你上传的文件，则需要在项目里配置数据源，具体在IDEA和eclipse中的配置地方是不一样的，稍后再追加地址（数据源）配置
eclipse中的数据源配置：在server.xml中 < Host></ Host>标签里面加上如下代码：
<Context debug="0" docBase="F:/upImages/" path="/file" reloadable="true"/>
F:/upImages/ 是上传的文件的地址，/file 是在本项目里的文件访问地址。例如在F:/upImages/里面已经存在了一个173321.mp4文件，那么在项目里，就可以通过/file/173321.mp4这个地址访问到文件。如果项目启动了，你也可以在浏览器里输入：项目地址+端口/file/173321.mp4，访问到文件，博主的实例如：http://localhost:8089//file/173321.mp4
IDE配置数据源
总结
以下两篇图片上传的文章也许会对你有帮助：
1.JS前端图片压缩上传-纯js(https://blog.csdn.net/bug_producter/article/details/114038966)
2.JS前端图片压缩上传(https://blog.csdn.net/bug_producter/article/details/113934145)
