前言

博主最近太难了，又是毕业设计又是论文，还得天天加班。都快一个月没有更新总结了，今天分享一个曾今用过的文件上传的实例，希望可以对一些小伙伴有所帮助。主要包括一个基于layui的前端文件上传的实例和后端Java操作的代码。代码和截图都会放在下面。

提示：以下是本篇文章正文内容，下面案例可供参考

一、js前端代码

<font color= >示例：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