• 图片的上传(一张图片的上传)


    效果图:

    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;  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;
        }
  • 相关阅读:
    一次有益的敏捷XP失败
    web拖动Drag&Drop原理
    一次有益的敏捷尝试
    一次有益的敏捷XP失败
    异地分布式敏捷软件开发探讨分析
    web拖动Drag&Drop原理
    XP中一些基本概念的简介
    XP中的重要惯例和规则
    异地分布式敏捷软件开发探讨分析
    PySide教程:第一个PySide应用
  • 原文地址:https://www.cnblogs.com/lxnlxn/p/10005886.html
Copyright © 2020-2023  润新知