servlet上传图片，当前时间的毫秒值为图片名称

最新推荐文章于 2023-07-15 22:25:35 发布

小axie

最新推荐文章于 2023-07-15 22:25:35 发布

阅读量249

点赞数

文章标签： intellij-idea java intellij idea

本文链接：https://blog.csdn.net/weixin_54039480/article/details/121505340

版权

servlet步骤：

1.复制layui中的文件上传代码
2.修改端口
layui提供的端口必须要替换掉，在idea中编写servlet，将编写的servlet接口存在到，layui下边的 url：""中
3.修改 field文本域的名称必须要与后台servlet一直
4.早serv中使用req.getPart获取前端页面中的field的值
5.使用part.getHeader("Content-Disposition");获取头部信息
6.通过lastindexof 获取最后一个“=”的索引值，在使用substring()参数获取后缀名，在将想要修改的名字使用字符串拼接
7.创建File对象，判断创建的文件是否存在，不存在则创建
8.使用part.write(path);上传路径，如果有虚拟路径，则String imgUrl="img/"+fikeName;定义一个变量名，使用虚拟变量拼接获取到的文件名称
9.创建HashMap对象
10.使用writer输出数据，关流

servlet代码：

package com.xiexin.controller;

import com.alibaba.fastjson.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;

@WebServlet(name = "PicUoLoadServlet",urlPatterns = "/PicUoLoadServlet")
@MultipartConfig
public class PicUoLoadServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //修正编码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        System.out.println("开始上传图片");

        Part part = request.getPart("userimg");//收取的不是参数，是文件
        System.out.println("part"+part);


        String header = part.getHeader("Content-Disposition");
        //在编写文件上传时，可以刷新页面，获取Content-Disposition 这个参数很重要
        System.out.println("header"+header);
               
        int i = header.lastIndexOf("=");
        String s = header.substring(i);
        System.out.println("i = "+i);
        //当前时间的毫秒值
        Calendar calendar = Calendar.getInstance();
        long time = calendar.getTimeInMillis();

        System.out.println("time="+time);

        //第一种方式截取图片名称
        String fikeName = header.substring(i + 2, header.length() - 1);
        System.out.println("fikeName"+fikeName);
        //获取.jpg后缀名的位置 i1
        int i1 = fikeName.lastIndexOf(".");
        System.out.println("i1 = "+i1);
        String houzui = fikeName.substring(i1, fikeName.length());
        System.out.println("houzui"+houzui);

        //拼接
        String quanming = time + houzui;
        System.out.println("quanming = "+ quanming);
        //System.out.println("substring = "+s);
        //图片存储位置的四种
        //1.存在项目里
        //2存在 服务器硬盘
        //3 存在 阿里云/七牛云
        //4 搭建nginx 服务器   fastDFS文件系统 存储照片文件
        // String realPath = request.getServletContext().getRealPath("upload");
        String realPath= "E:\\img";
        System.out.println("realPath = "+realPath);
        File file = new File(realPath);


        if (!file.exists()) {
                //判断创建的文件是否存在
            file.mkdirs();
        }
        String path = realPath+"\\"+quanming;
        System.out.println(path+"path");


        //开始上传
        part.write(path);
        System.out.println("图片上传成功 path="+path);
        String imgUrl="img/"+fikeName;
        Map map=new HashMap<>();
        map.put("code", 0);
        map.put("msg", "上传成功");
        map.put("data",imgUrl);


        String s1 = JSONObject.toJSONString(map);
        PrintWriter writer = response.getWriter();
        writer.println(s1);
        writer.close();
    }
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-v2.5.6/layui/css/layui.css">
    <script src="/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<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" id="test1">上传图片</button>
    <button><a href="tbuserlist.html" name="">返回首页</a> </button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1" style="width: 300px;height: 200px">
        <p id="demoText"></p>
    </div>
    <div style="width: 95px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>

</div>

<a name="list-progress"> </a>
</body>
<script>
    layui.use(['upload', 'element', 'layer'], function(){
             var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/PicUoLoadServlet' //该地方的的servlet需要自己配置编写，不要照抄，关于servlet的方法就在上边，名字随自己喜好
            ,field:'userimg'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）

                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


    });
</script>

</html>

效果图(由于本人不会制作gif动态，所以效果图以静态图片显示)：