关于ajax图片上传，上传是后台代码来完成的，利用ajaxSubmit来完成，前台只是负责提交数据

http://blog.csdn.net/cx19910829/article/details/77449104 这个也可以 参考下 

                工作第二天，要求做3个ajax小功能，后台代码已经给好了，在一个技术大牛的大哥指点下 ，终于把这个上传完成了（ps：我的前台基本很差）

功能：完成上传,即不用界面刷新即可得到上传图片，上传功能利用后台java代码上传，前台是jsp的，

先上干货吧，不多说了

 

前台代码：
解释下</span>这是一个隐藏域文件，

<div class="z-edit-data">//form表单设置，${SHOPDOMAIN}这个是公司的服务器地址	
		

<form action="${SHOPDOMAIN}/publicinterface/getImgurlbyfile.html" id="upimg_form" enctype="multipart/form-data" method="post">
    <input type="hidden" value="heaadpic" name="imgpath">
    <img src="${SHOPDOMAIN}${ sessionFrontUser.picUrl}" class="z-photo" alt=""/>
    <a href="javascript:;" class="a-upload">
    <input type="file" name="imgfile" id="imfile" style="position: absolute; right: 0; font-size: 100px; cursor: pointer; top: 0; z-index: 999; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);" id="upimg_file1" οnchange="upimg_click();"/>
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>上传
    </a><br/><br/><br/>
    <input type="button" class="btn1" name="z-submit" id="z-submit" value="保存"/>
</form>





ajax代码块



         
<script>
                    //得到上传图片的地址 
                    function upimg_click() {
                        $("#upimg_form").ajaxSubmit(
                                        {
                                            success : function(data) {
                                                if ($.parseJSON(data).res_code == "0") {
                                                    $(".z-photo").attr("src","${SHOPDOMAIN}/"+ $.parseJSON(data).filePath);
                                                    $("#uploadimage").val($.parseJSON(data).filePath); //隐藏域图片
                                                }
                                            }

                                        });
                    }
                  //上传照片
                    function submitss() {
                        var filepath = $("#uploadimage").val();
                        if(filepath==''){
                              showMessage("请先上传图片！");
                        }else{
                            $.ajax({
                                type : "post",
                                url : "${SHOPDOMAIN}/updatetouxiang.html",
                                dataType : "json",
                                data : {
                                    "myfile" : filepath
                                },
                                success : function(data) {
                                    if (data.res_code == "0") {
                                        showMessage("修改成功！");
                                    } else {
                                        showMessage(data.message);
                                    }
                                }
                            });
                        }
                    }
</script>

 





后台代码：

    @RequestMapping("/updatetouxiang")
    public void updatetouxiang(HttpServletResponse response,
            HttpServletRequest request, HttpSession session) {
        JSONObject json = new JSONObject();
        User su = (User) session.getAttribute(SystemConfig.SESSION_FRONT_USER);
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile myfile = multipartRequest.getFile("myfile");
        if (null != myfile && !myfile.isEmpty()) {
            String filePath = Tools.uploadpic(myfile, "uploadWebSite");
            if (null != filePath) {
                su.setPicUrl(filePath);
            }
        }
        if (userService.updateByPrimaryKeySelective(su) > 0) {
            json.put("res_code", "0");
            json.put("message", "success");
            session.setAttribute(SystemConfig.SESSION_FRONT_USER, su);
        } else {
            json.put("res_code", "1");
            json.put("message", "修改失败");
        }
        try {
            responseAjax(json, response);
        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

/**
     * 上传图片
     * 
     * @param myfile
     * @param picdir
     * @return
     */
    public static String uploadpic(MultipartFile myfile, String picdir) {
        String saveUrl = "/attached/";
        String originalFilename = myfile.getOriginalFilename();
        Map<String, String> maps = KindeditorController.mkdir(saveUrl, picdir);
        String endName = originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
        String filename = UUID.randomUUID() + endName;
        if (endName.equals(".png") || endName.equals(".gif") || endName.equals(".jpg") || endName.equals(".jpeg")) {
            try {
                FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(maps.get("savePath"), filename));
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return maps.get("saveUrl") + filename;
        }else if(endName.equals(".log")){
            try {
                FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(maps.get("savePath"), originalFilename));
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        return null;

    }





完成，，最后大家有不明的可以给我回复，我收到会尽量帮助大家的。