localResizeIMG先压缩后ajax无刷新上传图片

最新推荐文章于 2018-12-17 17:04:13 发布

梅川酷子哥21岁

最新推荐文章于 2018-12-17 17:04:13 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/xxwd12/article/details/73609135

版权

本文介绍了一个使用HTML、CSS和JavaScript实现的图片上传功能，并详细解释了如何通过前端进行图片尺寸调整，以及如何将图片数据发送到后端进行保存。文章还提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css部分对按钮美化

<input type="file" name="file" class="upload" accept="image/jpeg,image/jpg,image/png">
<a href="javaScript:void(0);"  class="but" οnclick="$(this).siblings('.upload').click();">上传</a>

javascript部分

引入js,可自行下载

<script src="/static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="/static/uploader/LocalResizeIMG.js" type="text/javascript"></script>
<script src="/static/uploader/mobileBUGFix.mini.js" type="text/javascript"></script>

$(".upload").on("click", function () {
    var sibForm = $(this);
    var form = $(this).siblings("a");
    $(this).localResizeIMG({
        width: 800, //上传图片后的大小
        quality: 1,  
        before: function (that, blob) {
            form.html("正在上传");
        },
        success: function (result) {

            var submitData = {
                base64_string: result.clearBase64,
            };
            $.ajax({
                type: "POST",
                url: "/insurance/upload",
                data: submitData,
                dataType: "json",
                success: function (data) {
                    if (0 == data.status) {
                        alert(data.content);
                        return false;
                    } else {   //图片同步到页面，根据自己需要，url为图片地址
var html = '<input type="hidden" value="' + data.url + '" name="' + form.data("state") + '"></input>';
                        $("#submitForm").append(html);var attstr = '<a href="'+data.url+'" target="_blank" id="' + form.data("state") + '" ><img  src="' + data.url + '"></a>';
                        $(".uploadImgItem a").each(function (index, value) {
                            if ($(this).attr("id") == form.data("state")) {
                                $("#" + form.data("state")).remove();
                            }
                        });
                        $(".uploadImgItem").append(attstr);

                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    form.html("上传成功")
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { //上传失败
                    //alert(XMLHttpRequest.status);
                    //alert(XMLHttpRequest.readyState);
                    //alert(textStatus);
                    form.html("上传失败");
                }
            });
        }
    });
})

java部分

@RequestMapping(value = "upload")
public String uploadHeadPic(HttpServletRequest request,HttpServletResponse response) throws IOException {
    try {
        String fileBase64 = request.getParameter("base64_string");
        if(fileBase64.startsWith("data:image/jpeg;base64,")){
            fileBase64 = fileBase64.replaceFirst("data:image/jpeg;base64,", "");
        }
        Calendar c = Calendar.getInstance();
        String destDir = "/upload/images/"+c.get(Calendar.YEAR)+"/" + (c.get(Calendar.MONTH)+1)+"/"+c.get(Calendar.DATE)+"/";
        String fileName= uploadBase64(destDir,fileBase64,request);
        response.getWriter().write("{\"status\":1,\"content\":\"上传成功\",\"url\":\""+fileName+"\"}");
    } catch (Exception e) {
        e.printStackTrace();
        response.getWriter().write("{'status':0,'content':'上传失败'}");
    }
    return null;
}

public String uploadBase64(String destDir,String base64str,HttpServletRequest request){

    byte[] fileData = Base64.base64ToByteArray(base64str);
    String realPath = request.getSession().getServletContext().getRealPath("/");
    File destFile = new File(realPath+destDir);
    if(!destFile.exists()){
        destFile.mkdirs();
    }
    String fileNameNew =getFileNameNew()+".jpg";
    FileUtils.wirteToFile(destFile.getAbsoluteFile()+"/"+fileNameNew, fileData);
    System.out.println(destFile.getAbsoluteFile()+"/"+fileNameNew);
    return destDir+fileNameNew;
}