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

转载:

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


语法:$.ajaxFileUpload([options])
options参数说明:
1、url           上传处理程序地址
2、fileElementId       文件选择框的id属性,即的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代码

原始的,控件展示效果如下:

因为原始控件的样式无法改变,所以我们一般会让这个标签隐藏,然后点击别的标签来触发上传控件。
[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 map= new HashMap();  
  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,即,且java代码中的变量要跟name的值保持一致,即@RequestParam MultipartFile myfile,这点非常的重要。

你可能感兴趣的:(文件上传)