使用ajaxfileupload.js实现上传文件功能

转载：

一、ajaxFileUpload是一个异步上传文件的jQuery插件。

语法：$.ajaxFileUpload([options])

options参数说明：

1、url　　　　　　　　　　 上传处理程序地址

2、fileElementId　　　　　  文件选择框的id属性，即<input type="file">的id
3、secureuri　　　　　　　 是否启用安全提交，默认为false
4、dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断

5、success　　　　　　　　服务器响应成功后的处理函数 ，参数data就是服务器返回的数据

6、error　　　　　　　　　 服务器响应失败后的处理函数

7、data 　　　　　　　　　 自定义参数，当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意，数据格式比较严格{param:[{'param1':'value1','param2':'value2' },{'param1':'value3','param2':'value4' }]}, 其中单引号不能改为双引号

8、type 　　　　　　　　　  提交数据的方式，一般为post

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件，注意先后顺序：

[html]  view plain  copy

1. <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>  
2. <script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>  

第二步、html代码

原始的<input type="file">，控件展示效果如下：

因为原始控件的样式无法改变，所以我们一般会让这个标签隐藏，然后点击别的标签来触发上传控件。

[html]  view plain  copy

1. <input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" />  
2.       <div class ="input-append">  
3.              <label for ="importPicName"> 上传原始图片：</label >  
4.              <input type ="text" class="input-large" id= "importPicName" />  
5.              <a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</ a>  
6.       </div >  

展现的页面效果：

第三步、js代码

在用户选择完上传图片后，需要把图片名称显示到输入框中，还需要在js文件中加入代码：

[javascript]  view plain  copy

1. $(document).ready(function(e) {  
2.       $('body').on('change',$('#ImportPicInput'),function(){  
3.             $( "#importPicName").val($( "#ImportPicInput").val());  
4.       });  
5. });  

上传文件的js代码：

[javascript]  view plain  copy

1. $.ajaxFileUpload({  
2.     type: "POST",  
3.     url: "/toolkit/importPicFile.do",  
4.     data:{picParams:text},//要传到后台的参数，没有可以不写  
5.     secureuri : false,//是否启用安全提交，默认为false  
6.     fileElementId:'ImportPicInput',//文件选择框的id属性  
7.     dataType: 'json',//服务器返回的格式  
8.     async : false,  
9.     success: function(data){  
10.         if(data.result=='success'){  
11.             //coding  
12.         }else{  
13.             //coding  
14.         }  
15.     },  
16.     error: function (data, status, e){  
17.         /coding  
18.     }  
19. });  

第四步、java代码

[java]  view plain  copy

1. @RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" )  
2.   public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams,  
3. @RequestParam MultipartFile myfile,HttpServletRequest request){  
4.               
5.             Map<String,Object> map= new HashMap<String,Object>();  
6.              if(myfile.isEmpty()){  
7.                   map.put( "result", "error");  
8.                   map.put( "msg", "上传文件不能为空" );  
9.             } else{  
10.                   String originalFilename=myfile.getOriginalFilename();  
11.                   String fileBaseName=FilenameUtils.getBaseName(originalFilename);  
12.                   String floderName=fileBaseName+"_" +DateUtil.getNowTimeData();  
13.                    try{  
14.                           
15.                         String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName);  
16.                          //把上传的图片放到服务器的文件夹下  
17.                         FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename));  
18.                          //coding  
19.                         map.put( "result", "success");  
20.                           
21.                   } catch (Exception e) {  
22.                         map.put( "result", "error");  
23.                         map.put( "msg",e.getMessage());  
24.                           
25.                   }  
26.             }  
27.             String result=String. valueOf(JSONObject.fromObject (map));  
28.              return result;  
29.       }  

三、注意点

（1）上文html中控件的css样式，都是用的bootstrap框架里的基本样式，也可以不用使用bootstrap框架，仅做参考。

（2） 之前用的live方法，前台js报错说找不到这个方法，后来查了资料才发现， 1.9以上的jquery版本已经废弃live这个方法了

[javascript]  view plain  copy

1. $(document).ready(function(e) {  
2.     $('#ImportPicInput ').live( 'change', function(){  
3.   
4.         })  
5. });  

具体可以参考： http://stackoverflow.com/questions/13418963/jquery-onchange-function-not-triggering-for-dynamically-created-inputs

(3)文件选择框必须要有name，即<input type ="file" id="ImportPicInput" name= "myfile" />，且java代码中的变量要跟name的值保持一致，即@RequestParam MultipartFile myfile,这点非常的重要。