基于lrz插件的图片上传，ajax异步交互和form上传

在进行图片上传的时候使用lrz进行图片上传，是将选中图片转换为base64编码，然后在后台解码就可以使用了，废话不多说，直接上码，看代码里的注释就好了，注释很多很齐

基于form上传的：

<form action="addSale" method="post">
	    书籍名称：<input name="book_name" type="text" value="123">
	    书籍ISBN：<input name="book_ISBN" type="text" value="123">
	    书籍价格：<input name="book_price" type="text" value="1231">
	    书籍详情：<input name="book_describe" type="text" value="123123">
	    书籍的专业:<input name="book_classID" type="text" value="0001">
	    书籍的系部：<input name="book_departmentID" type="text" value="0001">
	    书籍图片：
	    <div id="choosePhotoDiv">
	        <input accept="image/png,image/gif,image/jpg,image/jpeg" id="photoFile" multiple="multiple"
	               onchange="doFileChange(this)" type="file"> //这里用multiple可以选中多张照片
	    </div>
	    <div id="photoPreview">
	        <!--预览图片-->
	    </div>
	    <input type="submit" value="提交">
	</form>

ajax方式（推荐）前台就不写了，就是input那些变量，通过js获取值，
这里说一下选中多个图片时候，js怎么获取imgbase64数组，ajax传数组的写法，参照我上一条博客，这里就不累赘了 ajax传递数组

//获取图片信息
    var imgBase64 = new Array();//这里也可以用var a = [];
    //注意！这里的name值，对应下面1处的代码，不知道怎么加粗，就写个编号吧
    var b = $("input[name='imgBase64']");     
    for (var i = 0; i < b.length; i++) {
        imgBase64[i] = b[i].value;
    }
    console.log(imgBase64);

可以打印看一下获取了什么东西
这个是上传的页面

选中图片后，会在页面上进行预览
点击上传看看获取到的imgbase64是什么
这是一串base64编码，这个编码可以直接显示在页面上的
这是一大串编码，前面加data:image/jpeg;base64,就可以直接在img里面使用，为什么要加呢，看下面的代码，因为获取到的值，被我去掉了这个（data:image/jpeg;base64,）所以加回去才能显示，
去掉原因后台的时候说。

这个js就是这样的
记住，用这个的时候要引入
jquery-1.10.2.min.js
lrz.bundle.js

<script type="text/javascript">
    //压缩及加密imgBase64插件lyz，可以通过调整width大![在这里插入图片描述](https://img-blog.csdnimg.cn/20190426103011500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIzNjQxOQ==,size_16,color_FFFFFF,t_70)小压缩图片
    function doFileChange(fileElm) {
        if (fileElm.files.length <= 3 && fileElm.files.length >=1) {
            for (var i = 0; i < fileElm.files.length; i++) {
                //这里的width：1000是设置图片的大小，可以用来压缩图片，注意，压缩太多会失真
                lrz(fileElm.files[i], {width: 1000}).then(function (resultObj) {
                    $("#photoPreview").append("<img src='" + resultObj.base64 + "'/>");
                    //判断是否带有前端协议，前端：data:imge/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA
                    //如果有前端协议，则截取“，”之后的内容
                    var base64 = resultObj.base64;
                    if (base64.startsWith("data")) {
                        var imgBase64 = base64.substring(base64.indexOf(',') + 1);
                    }
                    //将选中图片预览到photoPreview窗口里面
                    ***$("#photoPreview").append("<input type='hidden' name='imgBase64' value='" + imgBase64 + "'/>");***						//1
                });
            }
        }
        if (fileElm.files.length <1){
            alert("最少选择一张照片");
        }
        if (fileElm.files.length > 3){
            alert("最多只能选择三张照片");
            $("#photoFile").val('');
        }
    }
</script>

后台呢，获取值的时候，用一个实体类来获取，这里就讲一下imgbase64这个数组的获取
在实体类里定义一个数组来接收参数

 /**
     * 1、判断用户对应的文件夹是否存在
     * 2、保存文件到指定的文件夹中
     * 3、把数据插入到数据库，即添加一条sale记录
     *
     * @param sale
     * @param userID
     */
//    @CachePut(value = "aboutUser", key = "'user_sale_'+#userID")
    @Override
    @CacheEvict(value = "aboutShop", allEntries = true)
    public void addSale(Sale sale, String userID) {

        String[] imgBase64 = sale.getImgBase64();
        String bookID = SaleTool.createUUID();

        String relativePath = "";
        String relativePath0 = "";
        String relativePath1 = "";
        String relativePath2 = "";

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHmmss");
        Date nowDate = new Date();
        String date = simpleDateFormat.format(nowDate);
        //以名字 + 用户ID + 时间为文件名
        createSaleFolder(userID, date);


        /**
         * 创建图片名，以及包括图片名称的根的绝对路径
         */
        for (int i = 0; i < imgBase64.length; i++) {
            String saleUUID = SaleTool.createUUID();
            String rootPath = Val.REAL_PATH;
            String fileName = saleUUID + ".png";

            System.out.println("**********************"+imgBase64[i]);

            if (i == 0) {
                relativePath0 = "/salephoto/" + userID + "/" + date + "/" + fileName;
                relativePath = relativePath0;
            }
            if (i == 1) {
                relativePath1 = "/salephoto/" + userID + "/" + date + "/" + fileName;
                relativePath = relativePath1;
            }
            if (i == 2) {
                relativePath2 = "/salephoto/" + userID + "/" + date + "/" + fileName;
                relativePath = relativePath2;
            }
            String fullPath = rootPath + relativePath;
            System.out.println("========fullPath========" + fullPath);
            try {
                SaleTool.writeImgBase64ToFile(imgBase64[i], fullPath);	//这里是将base64传入一个方法中，将方法中的base64编码转化为图片，并存入本地or服务器
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
/**
     * 创建文件夹
     *
     * @param userID
     */
    private void createSaleFolder(String userID, String date) {
        String fullPath = Val.REAL_PATH + "/salephoto/" + userID + "/" + date;
        File file = new File(fullPath);
        if (!file.exists()) {
            file.mkdirs();
        }
    }

/**
     * 将图片的base64字符串，反转为字节数组，最后写入指定图片文件夹中
     *
     * @param imgBase64
     * @param filePath
     * @throws Exception
     */
    public static void writeImgBase64ToFile(String imgBase64, String filePath) throws  Exception{

        if (imgBase64 == null || imgBase64.length() == 0){
            return;
        }
        //这个写在js页面上，因为上传一张照片时，会把data:imge/jpeg;base64和后面的字节分开成两个imgBase64，
        //这样会导致传一张照片的时候回产生一个由data:imge/jpeg;base64组成的乱码图片，所以在js上直接拦截掉就好了，这就是前面去掉data:imge/jpeg;base64，的原因了
        /*//判断是否带有前端协议，前端：data:imge/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA
        //如果有前端协议，则截取“，”之后的内容
        if (imgBase64.startsWith("data")) {
            imgBase64 = imgBase64.substring(imgBase64.indexOf(",") + 1);
        }*/

        BASE64Decoder decoder = new BASE64Decoder();
        byte[] bs = decoder.decodeBuffer(imgBase64);
        FileOutputStream fos = new FileOutputStream(filePath);
        fos.write(bs);
        fos.close();
    }

最近在赶毕业设计，就不写多了，记录一下就好了
这个是lrz插件的下载地址，可以下载用一下，源码等忙完了，写一个完整的demo放在git上，再发出来
链接：https://pan.baidu.com/s/1tw9lK-1DPeI2efUybI-xOQ
提取码：qx6u