原生文件上传代码

最新推荐文章于 2024-06-04 17:35:28 发布

砂锅大的拳头

最新推荐文章于 2024-06-04 17:35:28 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/weixin_43343423/article/details/91419459

版权

前端lauyi

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css">

    <script src="<%=request.getContextPath()%>/js/common.js"></script>
    <script src="<%=request.getContextPath()%>/js/UrlRouter.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.js"></script>

    <style>
        #preview img {
            max-height: 150px;
        }
    </style>
</head>
<body style="padding: 15px">
<div>新增广告</div>

<form class="layui-form" action="">

    <div class="layui-form-item">
        <div class="layui-upload-drag" id="chooseImage">
            <i class="layui-icon"></i>
            <p>点击上传图片，或将图片文件拖拽到此处</p>
        </div>

        <div>
            <div id="preview" ></div>
            <input type="hidden" name="imageUrl">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" name="bgColor" value="" placeholder="请选择颜色" class="layui-input"
                   id="bgColor-form-input">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="chooseColor"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="adSubmit">立即提交</button>
        </div>
    </div>

</form>

<script src="<%=request.getContextPath()%>/layui/layui.all.js" charset="UTF-8"></script>
<script>
    var colorpicker, upload, form,layer ;
    layui.use(['form', 'colorpicker', 'upload'], function () {
        form = layui.form;
        layer = layui.layer;
        colorpicker = layui.colorpicker;
        upload = layui.upload;

        //表单赋值
        colorpicker.render({
            elem: '#chooseColor'
            , color: '#e63c22'
            , done: function (color) {
                $('#bgColor-form-input').val(color);
            }
        });

        //拖拽上传
        upload.render({
            elem: '#chooseImage'
            , url: baseUrl + '/api/upLoadImages'
            , accept: 'file' //普通文件
            , done: function (res) {
                console.log(res)
                $("#preview").html('<img src="' + res.data.src + '" alt="" class="layui-upload-img">');
                $("input[name='imageUrl']").val(res.data.src)
                layer.msg('上传成功');
            }, error: function (res) {
                console.log(res)
                layer.msg('上传失败', {
                    icon: 1,
                    time: 3000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });
            }
        });

        //监听提交
        form.on('submit(adSubmit)', function(data){
            console.log(data);
            var imageUrl = data.field.imageUrl ;
            var bgColor = data.field.bgColor ;
            if(!imageUrl){
                layer.msg("请选择图片");
                return false;
            }
            if(!bgColor){
                layer.msg("请选择背景颜色");
                return false;
            }


            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // });

            var uploadData = data.field ;
            uploadData.method = "create" ;

            $.ajax({
                url: baseUrl + "/api/ad",
                data:uploadData,
                type: "post",
                dataType: "json",
                success: function (jsonData) {
                    layer.msg(jsonData.msg);
                },
                error:function () {

                }
            })


            return false;
        });
    })


</script>
</body>
</html>

servlet接受图片

public class upLoadImageServlet extends BaseServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out =response.getWriter();
        String path="/upLoadImages";
//        获取绝对路径（工程在服务器上的绝对路径）
        String savePath=request.getServletContext().getRealPath(path);
//        out.println(savePath);
        File savePathFile = new File(savePath);
        if(!savePathFile.exists()){
            savePathFile.mkdirs();
        }
        Part part=request.getPart("file");
        String header = part.getHeader("Content-Disposition");
        String fileName = System.currentTimeMillis() + "_" + getFileName(header);
        String allPath=savePath+File.separator+fileName;
        part.write(allPath);
//        BaseResp<ImagePath> baseResp=new BaseResp<>(1,"成功",allPath);
        BaseResp<ImagePath> baseResp=new BaseResp<>();
        ImagePath imagePath=new ImagePath();
        imagePath.setSrc(request.getContextPath()+path+"/"+fileName);
        baseResp.setCode(0);
        baseResp.setMsg("上传成功");
        baseResp.setData(imagePath);
        out.println(gson.toJson(baseResp));
    }
    public  String getFileName(String header){
        String[] tempArr1=header.split(";");
        String[] tempArr2=tempArr1[2].split("=");
        return tempArr2[1].substring(tempArr2[1].lastIndexOf("\\")+1).replaceAll("\"","");
    }

bean回参数

package com.sy.store.bean.base;

public class BaseResp<T> {
    public  static final int code_sucess=1;
    public static  final  int code_falled=0;
    private  int code;
    private  String msg;
    private  T data;

    public BaseResp() {
    }

    public BaseResp(int code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public static int getCode_sucess() {
        return code_sucess;
    }

    public static int getCode_falled() {
        return code_falled;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

上传成功后前端，提交返回图片路径给后端

 public void createAd(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        AdService adService=new AdServiceImpl();
        String imageUrl = request.getParameter("imageUrl");
        String bgColor = request.getParameter("bgColor");
        Ad ad =new Ad(imageUrl,bgColor,1,1);
        BaseResp baseResp=new BaseResp();
        boolean count= false;
        try {
            count = adService.insertAd(ad);
            if (count){
                baseResp.setCode(BaseResp.code_sucess);
                baseResp.setMsg("插入成功");
            }else {
                baseResp.setCode(BaseResp.code_falled);
                baseResp.setMsg("插入失败");
            }
        } catch (StoreException e) {
            e.printStackTrace();
            baseResp.setCode(BaseResp.code_falled);
            baseResp.setMsg(e.getMessage());
        }
        System.out.println(count?"插入成功":"插入失败");
//插入数据返回参数
        response.getWriter().println(gson.toJson(baseResp));
    }

砂锅大的拳头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生文件上传代码

前端lauyi<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <meta charset="UTF-8"> <link rel="styles...
复制链接

扫一扫