使用 ajaxFileUpload 进行图片上传

摘要：前端部分使用主要是为了异步上传文件，不需要开启新的页面进行上传由于不能上传文件，该文件的代码在本篇文章的最底部由于这个文件已经很久没用更新了，所以增加了来处理错误，前端代码如下第一个中的属性是为了限制上传的文件属性，其他文件可以去掉该属性引

使用ajaxFileUpload 主要是为了异步上传文件，不需要开启新的页面进行上传！
由于segmentfault不能上传文件，该文件ajaxFileUpload.js的代码在本篇文章的最底部：
由于ajaxFileUpload这个文件已经很久没用更新了，所以增加了handleError: function( s, xhr, status, e )来处理错误，

前端代码如下：
第一个input中的accept属性是为了限制上传的文件属性，其他文件可以去掉该属性

引用两个js文件

上传按钮：

js代码：

    //图片上传
    function ajaxFileUpload()
    {
         
        $.ajaxFileUpload({
                url:"/ai/app/uploadImage",//用于文件上传的服务器端请求地址
                secureuri:false ,//一般设置为false
                fileElementId:"upload",//文件上传控件的id属性  
                dataType: "text",//返回值类型 一般设置为json
                success: function (message)  //服务器成功响应处理函数
                {
                    layer.alert(message);
                    $("#tool_icon").val(message);
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            });
        return false;
    }

该项目使用的spring框架，需要配置bean，来接受上传的文件

后端代码

@ResponseBody
    @RequestMapping(value="/uploadImage",method=RequestMethod.POST)
    public String uploadImage(HttpServletRequest request,@RequestParam("imagefile") MultipartFile file) throws IOException{
       String getOriginalFilename = null;
       logger.debug("文件原名: " + getOriginalFilename);
       logger.debug("文件名称: " + file.getName());
       logger.debug("文件长度: " + file.getSize());
       logger.debug("文件类型: " + file.getContentType());
       if( file.isEmpty()){
          logger.error("upload image--------------------------------->failed");
          return "please select a image";
       }
       /**文件在服务器中的实际路径*/
      
       String realPath = request.getSession().getServletContext().getRealPath("/upload");  
       logger.debug("realPath---------------------------------------->"+realPath);
       logger.debug("getOriginalFilename----------------------------->"+file.getOriginalFilename());
       
       /**写入地址中*/
       FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath,file.getOriginalFilename()));
       
       /**使用原生方法*/
       /* byte[] bytes = file.getBytes();
       BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File("/ai/images/icons/toolLogo/demo.png")));
       stream.write(bytes);
       stream.close();*/
       /**返回文件在服务器中的地址，用于存储入库*/
       
       String resultUrl = "/ai/upload/"+file.getOriginalFilename();
       logger.debug("upload image file result----------------------->"+resultUrl);
       return resultUrl;
    }

相关jar包下载：org.apache.commons.io_1.3.2.jar org.apache.commons.fileupload.jar
相关jar包的地址
参考blog：
jQuery插件之ajaxFileUpload
http://blessht.iteye.com/blog/1405057
http://blog.csdn.net/jadyer/article/details/11693705
http://www.cnblogs.com/rollenholt/p/3693087.html

ajaxFileUpload.js 源代码

// JavaScript Document
jQuery.extend({

    createUploadIframe: function(id, uri)
 {
   //create frame
            var frameId = "jUploadFrame" + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement("