文件上传小Demo

文件上传
操作步骤:
1.在form表单中:
post方式
enctype=“multipart/from-date”
2.文件上传功能组件:jar包
commons-fileupload
commons-io
3.构建上传的类
构建工厂
构建对象
处理中英文乱码
获取上传文件集合:
从对象中获取到根路径
遍历上传的集合:
判断是否为文件格式
1.如果是文件直接上传
2.确定上传的路径
判断路径是否存在,不存在就创建
3.确保文件名不重复,应uuid方法
4.确定是否大三目录
5.执行上传

@WebServlet("/FileUpload")
public class MyFileUpload extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.创建工厂
        DiskFileItemFactory dfif = new DiskFileItemFactory();
        //2.创建对象,把工厂传进去
        ServletFileUpload sfu = new ServletFileUpload(dfif);
        //处理文件乱码
        sfu.setHeaderEncoding("utf-8");

        //存储上传文件的名称集合
        ArrayList<String> names = new ArrayList<>();

        try {
            //获取文件上传的集合
            List<FileItem> fileItems =  sfu.parseRequest(request);
            //遍历集合名
            for (FileItem fi:fileItems) {

                System.out.println(fi.getSize());
                //判断表单是否为普通类型
                if(fi.isFormField()){
                    //如果是直接输出文件名
                    System.out.println(fi.getName());
                }else{
                    //否则该表单为file类型
                    String name = upload(fi);
                    //添加到集合里
                    names.add(name);
                }
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        //request作用域用于回显页面信息
        request.setAttribute("names",names);
        //转发到页面
        request.getRequestDispatcher("index.jsp").forward(request,response);
    }


    protected String upload(FileItem fi) throws Exception{
        //获取上下文的根路径
        String realPath = this.getServletContext().getRealPath("/upload");
        //加载成文件
        File file = new File(realPath);
        //判断是否包含这个文件
        if(!file.exists()){
            //不包含就创建
            file.mkdir();
        }
        //获取他的文件名
        String name = fi.getName();
        //分散文件
        String[] split = name.split("\\.");

        String newName = UUID.randomUUID() + "." + split[split.length-1];
        //执行上传
        fi.write(new File(realPath+"/"+newName));
        System.out.println(realPath+"/"+newName);
        return newName;
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}
表单代码`<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/3/8
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <form action="FileUpload" method="post" enctype="multipart/form-data">
    <input type="file" name="pic">
    <input type="submit" value="上传">
  </form>



<c:forEach items="${names}" var="name">
  <img src="/upload/${name}">
  <a href="FileDownload?filename=${name}">点击下载</a>
</c:forEach>

  </body>
</html>
`
以下是一个简单的 layui 文件上传的示例代码: HTML 代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">选择文件</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> <button type="button" class="layui-btn" id="test-upload-reload">重传</button> <button type="button" class="layui-btn layui-btn-danger" id="test-upload-delete">删除</button> </div> ``` JavaScript 代码: ```javascript layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test-upload-normal' ,url: '/upload/' ,accept: 'file' //允许上传的文件类型 ,done: function(res){ //上传完毕回调 console.log(res); if(res.code == 0){ var demoText = $('#demoText'); demoText.html('<span style="color: #5FB878;">上传成功</span>'); $('#demoList').append('<tr><td>'+ res.filename +'</td><td>'+ (res.size/1024).toFixed(1) +'kb</td><td>上传成功</td><td><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>'); }else{ var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> ' + res.msg); } } ,error: function(){ //请求异常回调 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> 服务器异常,请稍后重试'); } }); //文件列表操作 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#test-list' ,url: '/upload/' ,accept: 'file' ,multiple: true ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var files = obj.pushFile(); //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ console.log(index, file, result); $('#demoList').append('<tr><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>') }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr').eq(index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html('<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr').eq(index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); //删除文件 $('#demoList').on('click', '.demo-delete', function(){ var tr = $(this).parents('tr') ,index = tr.index(); //删除对应的文件 uploadListIns.config.elem.next()[0].value = ''; uploadListIns.config.files.splice(index, 1); tr.remove(); }); //重传文件 $('#demoList').on('click', '.demo-reload', function(){ var tr = $(this).parents('tr') ,index = tr.index(); //删除对应的文件 uploadListIns.config.files.splice(index, 1); tr.remove(); uploadListIns.upload(); }); }); ``` 这个示例代码实现了单文件上传和多文件上传的功能,并且可以实现文件的删除和重传操作。你可以根据自己的需求进行修改和扩展。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值