ssm+easyui+ajax异步图片上传

(1)在springmvc中配置

             class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        
          
            10485760  
         
       
       
            UTF-8
       
    

（2）jsp页面如下：

  

            

 

                    
                    
   

新闻封面:

上传                         预览

       
           
               
           
       

    

script脚本

 //弹出文件选择器
function uploadPhoto(){
    $("#photo-file").click();
    
}

//ajax上传图片

function upload(){
    if($("#photo-file").val() == '')return;
    var formData = new FormData();
    formData.append('photo',document.getElementById('photo-file').files[0]);
    $("#process-dialog").dialog('open');
    var interval = setInterval(start,200);
    $.ajax({
        url:'upload_photo.action',
        type:'post',
        data:formData,
        contentType:false,
        processData:false,
        success:function(data){
            clearInterval(interval);
            $("#process-dialog").dialog('close');
            if(data.type == 'success'){
                $("#preview-photo").attr('src',data.filepath);
                $("#add-photo").val(data.filepath);
            }else{
                $.messager.alert("消息提醒",data.msg,"warning");
            }
        },
        error:function(data){
            clearInterval(interval);
            $("#process-dialog").dialog('close');
            $.messager.alert("消息提醒","上传失败!","warning");
        }
    });
}

//打开预览窗口

function preview(){
    $('#preview-dialog').dialog({
        closed: false,
        modal:true,
        title: "预览封面图片",
        buttons: [{
            text: '关闭',
            iconCls: 'icon-cancel',
            handler: function () {
                $('#preview-dialog').dialog('close');                    
            }
        }],
        onBeforeOpen:function(){
            //$("#add-form input").val('');
        }
    });
}

//图片上传进度条的设置（可参考easyui的文档）
function start(){
        var value = $('#p').progressbar('getValue');
        if (value < 100){
            value += Math.floor(Math.random() * 10);
            $('#p').progressbar('setValue', value);
        }else{
            $('#p').progressbar('setValue',0)
        }
};

 controller

/**
     * 上传图片
     * @param photo
     * @param request
     * @return
     */
    @RequestMapping(value="/upload_photo",method=RequestMethod.POST)
    @ResponseBody
    public Map uploadPhoto(MultipartFile photo,HttpServletRequest request){
        Map ret = new HashMap();
        if(photo == null){
            ret.put("type", "error");
            ret.put("msg", "选择要上传的文件！");
            return ret;
        }
        if(photo.getSize() > 10*1024*1024){
            ret.put("type", "error");
            ret.put("msg", "文件大小不能超过10M！");
            return ret;
        }
        //获取文件后缀
        String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".")+1,photo.getOriginalFilename().length());
        if(!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())){
            ret.put("type", "error");
            ret.put("msg", "请选择jpg,jpeg,gif,png格式的图片！");
            return ret;
        }
        String savePath = request.getServletContext().getRealPath("/") + "/resources/upload/";
        File savePathFile = new File(savePath);
        if(!savePathFile.exists()){
            //若不存在改目录，则创建目录
            savePathFile.mkdir();
        }
        String filename = new Date().getTime()+"."+suffix;
        try {
            //将文件保存至指定目录
            photo.transferTo(new File(savePath+filename));
        }catch (Exception e) {
            // TODO Auto-generated catch block
            ret.put("type", "error");
            ret.put("msg", "保存文件异常！");
            e.printStackTrace();
            return ret;
        }
        ret.put("type", "success");
        ret.put("msg", "用户上传图片成功！");
        ret.put("filepath",request.getServletContext().getContextPath() + "/resources/upload/" + filename );
        return ret;
    }
}