如何在一次ajax内传送一个或多个文件到后台--转 http://huyifan951124.iteye.com/blog/2337540

如何在一次ajax内传送一个或多个文件到后台

博客分类：
ajax多文件java 

在开发的时候我们可能都需要传一些文件到后台，然后又不希望刷新页面，那么我们可用ajax传文件流到后台。

我们可以在js中用FormData这个对象来包装文件流对象。

1.首先我们怎么能够让file能够选择多个文件呢，很简单加个multiple属性就行，这样就可以再选文件的时候选择多个文件了。

 

Html代码  收藏代码
  1. <input type="file" id="images" name="images" multiple />  

 2.接着，我们要在js中获得这个文件对象

 

 

Js代码  收藏代码
  1. $("#submit").click(function() {  
  2.   
  3.     var paths = document.getElementById("images").files;  
  4.               
  5.               
  6.               
  7.     if(paths.length==0)  
  8.     {  
  9.         alert("请选择文件");  
  10.         return;  
  11.     }  
  12.               
  13.     var formData = new FormData();  
  14.     //alert(paths.length);  
  15.         //我们遍历每一个文件对象  
  16.     for (var i = 0; i < paths.length; i++) {  
  17.         var file = paths[i];  
  18.         //alert(file.type);  
  19.                //用正则表达式判断文件的类型是否是图片，这里大家可以自由发挥  
  20.         if (!new RegExp("image/*").test(file.type)) {  
  21.             alert("请注意，上传的文件一定要是图片文件");  
  22.                     return;  
  23.         }   
  24.     }  
  25.     //alert("开始上传");  
  26.        //我们可以预先定义一个FormData对象  
  27.     var formData=new FormData();  
  28.               
  29.     for(var i=0;i<paths.length;i++)  
  30.     {  
  31.                 //将每个文件设置一个string类型的名字，放入到formData中，这里类似于setAttribute("",Object)  
  32.         formData.append(paths[i].name,paths[i]);  
  33.     }  
  34.               
  35.               
  36.     $.ajax({  
  37.                   
  38.          url: '/MySoleSys/mainServlet',  
  39.              type: 'POST',  
  40.          cache: false,  
  41.              data:formData,  
  42.                  //这个参数是jquery特有的，不进行序列化，因为我们不是json格式的字符串，而是要传文件  
  43.          processData: false,  
  44.                //注意这里一定要设置contentType:false，不然会默认为传的是字符串，这样文件就传不过去了  
  45.          contentType: false,  
  46.          success:function(returnedData)  
  47.          {   
  48.                if($.trim(returnedData)==$.trim("success"))  
  49.                {  
  50.                     alert("上传图片成功");  
  51.                 window.location.href="/MySoleSys/mainboard/index.html"  
  52.             }  
  53.             else if($.trim(returnedData)==$.trim("fail"))  
  54.                 alert("上传图片失败");                              
  55.         }  
  56.     });  
  57.   
  58. });  

 3.下一步我们肯定要在后台接收文件啦，这里我已开始用action接受，但总是收不到文件，也许是struts2过滤器的问题，改成用Servlet接受就成了。。。郁闷。。，后台我们用request.getParts()接受FormData.

 

 

Java代码  收藏代码
  1. Collection<Part>parts=request.getParts();  
  2. Iterator<Part> it=parts.iterator();  
  3. while(it.hasNext())  
  4. {  
  5.     Part img=it.next();           
  6.     /** 
  7.      * 开始传图片到服务器端文件夹。 
  8.      */  
  9.     file=new File(path+"\\"+img.getName());  
  10.     fos=new FileOutputStream(file);       
  11.         //可以从每个part中获得文件的输入流，获得输入流之后想怎么搞就怎么搞都可以啦  
  12.     imgis=img.getInputStream();  
  13.                   
  14.     int len=-1;  
  15.     while((len=imgis.read(bytes))!=-1)  
  16.     {  
  17.         fos.write(bytes,0, len);  
  18.     }  
  19.     fos.flush();  
  20.                   
  21. }  

 

 还有一点就是如果报一次请求的数据量太大了的话，可以在struts.xml配置struts.multipart.maxSize属性，把他的值改大一点就可以了。

 

Xml代码  收藏代码
    1. <constant name="struts.multipart.maxSize" value="9000000" /> 

posted on 2017-05-10 17:30  anruy  阅读(487)  评论(0)  编辑  收藏  举报

导航