图片的上传

Posted 2021-01-22 lxnlxn

效果图：

jsp:
<script src="../..//platform/js/layer/layer.js"></script>
<script src="../../platform/js/ajax/ajaxfileupload.js"></script>

<script type="text/javascript">
$(function() {
//上传图片
    $("#cmsArticleImageFile").change(function() {
        var cmsArticleImageFile = $("#cmsArticleImageFile").val();
        if (cmsArticleImageFile == null || cmsArticleImageFile == "") {
            layer.tips(‘请选择图片！‘, ‘#mybutton‘, {tips : 3});
        } else {
            $.ajaxFileUpload({
                type : ‘POST‘,
                url : ‘imageUpload.do‘, //用于文件上传的服务器端请求地址
                secureuri : false, //是否需要安全协议，一般设置为false
                fileElementId : ‘cmsArticleImageFile‘, //文件上传域的ID
                data : {
                    "folderType" : ‘yaoWen‘
                },
                dataType : ‘json‘, //返回值类型 一般设置为json
                success : function(result, status) {//服务器成功响应处理函数
                    if (result.code == "ok") {
                        $(‘#cmsArticleImageFileSrc‘).prop(‘src‘,result.data.filePath);
                        $(‘#articleImage‘).val(result.data.filePath);
                    } else {
                        layer.alert(result.msg);
                    }
                }
            });
        }
    });
});
</script>

<td>
    <img id="cmsArticleImageFileSrc" style="height: 320px; width: 440px;" class="img-rounded" data-action="zoom"
     <c:if test="${!empty cmsArticle.articleImage}"> src="${cmsArticle.articleImage}" </c:if>
     <c:if test="${empty cmsArticle.articleImage}"> src="${pageContext.request.contextPath}/cms/image/imageNo.jpg" </c:if>>
     <input id="cmsArticleImageFile" name="cmsArticleImageFile" type="file" style="display:none;" accept="image/png, image/jpeg, image/gif, image/jpg" />
     <input id="articleImage" type="text" name="articleImage" value="${cmsArticle.articleImage}" style="display:none;"/>
     <input id="mybutton" type="button" class="btn btn-info" onclick="$(‘input[id=cmsArticleImageFile]‘).click();" value="浏览并上传"/>
 </td>
controller层：
/**
     * @category 封面图片上传
     * @param request
     * @param response
     */
    @RequestMapping(value = "/.../..../imageUpload", method = RequestMethod.POST)
    public void cmsImageUpload(HttpServletRequest request, HttpServletResponse response) {
        //文件类别
        String folderType = request.getParameter("folderType");
        try {
            //上传图片
            ClientResponse resp = uploadController.uploadAll(request, folderType);
            //
            resp.writeTo(response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

//调用方法：
    public ClientResponse uploadAll(HttpServletRequest request, //客户端请求
            String folderType//文件类别
    ) throws Exception {
        String basePath = "upload/" + folderType + "/";
        // 相对路径
        String filePath = request.getContextPath() + "/" + basePath;
        // 绝对路径
        String savePath = request.getServletContext().getRealPath("/") + basePath;
        long startTime = System.currentTimeMillis();
        // 将当前上下文初始化给 CommonsMutipartResolver （多部分解析器）
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        if (!multipartResolver.isMultipart(request)) {
            return ClientResponse.createErrorResult("未找到文件", null);
        }
        ClientResponse resp = ClientResponse.createOkResult("ok");
        // 检查form中是否有enctype="multipart/form-data"
        if (multipartResolver.isMultipart(request)) {
            // 将request变成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 获取multiRequest 中所有的文件名
            Iterator<?> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                // 一次遍历所有文件
                MultipartFile multipartFile = multiRequest.getFile(iter.next().toString());
                if (multipartFile != null) {
                    String originalName = multipartFile.getOriginalFilename();
                    // 检查扩展名
                    String fileExt = originalName.substring(originalName.lastIndexOf(".") + 1).toLowerCase();
                    if (!Arrays.<String> asList(extMap.get("file").split(",")).contains(fileExt)) {
                        return ClientResponse.createErrorResult("不允许的文件格式,只允许" + extMap.get("image") + "格式。", null);
                    }
                    String newName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + "." + fileExt;
                    savePath += newName;
                    filePath += newName;
                    File dirFile = new File(savePath);
                    if (!dirFile.exists()) {
                        dirFile.mkdirs();
                    }
                    // 上传
                    multipartFile.transferTo(dirFile);
                    //源文件名
                    resp.addData("originalName", originalName);
                    //上传成后文件路径
                    resp.addData("filePath", filePath);
                }
            }
        }
        long endTime = System.currentTimeMillis();
        logger.println("上传运行时间：" + String.valueOf(endTime - startTime) + "ms");
        return resp;
    }