AJAX上传图片

采用 ajaxfileupload.js

 

前台页面

<form>
      <img src="/static/img/logo.png" id="logoImg" class="img-polaroid">
                                <input type="file" name="userPhoto" id="userPhoto">  
                                <input type="button" value="上传" id="shangchuan">
</form>

 AJAX提交方法

 $("#shangchuan").click(function(){  
                var file = $("#userPhoto").val();  
                if(file==""){  
                    alert("请选择上传的图片");  
                    return;  
                }  
                else{  
                    //判断上传的文件的格式是否正确  
                    var fileType = file.substring(file.lastIndexOf(".")+1);  
                    if(fileType!="png"&&fileType!="jpg"){  
                        alert("上传文件格式错误");  
                        return;  
                    }  
                    else{  
                        var url = "...";  
                        $.ajaxFileUpload({  
                            url:url,  
                            secureuri:false,  
                            fileElementId:"userPhoto",        //file的id  
                            dataType:"text",                  //返回数据类型为文本,不能填json,不然会报错  
                            success: function (data, status){
                                $("#logoImg").attr("src",data);
                                
                            },
                            error: function (data, status, e){
				alert(e);
                            }  
                        })  
                    }  
                }  
            })  

 

后台:

 

    @RequestMapping(value = "/addLogo")
    public String addLogo(@RequestParam("userPhoto") MultipartFile userPhoto) throws Exception {       
        String fileName = "/brand"+DateTimeUtils.format(new Date(),"yyyy_MM_dd_HH_mm_ss")+userPhoto.getOriginalFilename();
        String url = ImageUtils.uploadByName(userPhoto.getInputStream(), fileName);
//上传文件的方法这里忽略
        return url;
    }