使用 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('