使用 ajaxFileUpload 进行图片上传

前端部分

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

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

引用两个js文件

上传按钮：

js代码：

动易网上商城管理系统 2006 Sp6 Build 1120 普及版

将产品展示、购物管理、资金管理等功能相结合，并提供了简易的操作、丰富的功能和完善的权限管理，为用户提供了一个低成本、高效率的网上商城建设方案包含PowerEasy CMS普及版，主要功能模块：文章频道、下载频道、图片频道、留言频道、采集管理、商城模块、商城日常操作模块500个订单限制（超出限制后只能查看和删除，不能进行其他处理） 无订单处理权限分配功能（只有超级管理员才能处理订单）

下载

    //图片上传
    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;
    }

ajaxFileUpload.js 源代码

// JavaScript Document
jQuery.extend({

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