• ajax多文件上传,js原生ajax请求(转)


     1       function uploadImageFile(){    
     2                 var xhr = new XMLHttpRequest();
     3                 //定义表单变量    
     4                 var file = document.getElementById('imageFiles').files;    
     5                 //新建一个FormData对象    
     6                 var formData = new FormData();
     7                 //追加文件数据    
     8                 for(i=0;i<file.length;i++){      
     9                      formData.append("file["+i+"]", file[i]);
    10                 }     
    11                     
    12                 //post方式    
    13                 xhr.open('POST', memberPath + "/backstage/photo/uploadPhoto.json"); 
    14                 //发送请求    
    15                 xhr.send(formData);
    16                 //success回调    
    17                 xhr.onreadystatechange = function(){
    18                     if ( xhr.readyState == 4 && xhr.status == 200 ) {
    19                         console.log( xhr.responseText );    
    20                         var data = xhr.responseText;
    21                         data = JSON.parse(xhr.responseText)    
    22                         if (data.code == 100) {
    23                             //insertPhotoList(data.userPhotos); 这里传过来的是一个List<model>,做页面逻辑处理的
    24                         } else if (data.code == 101) {
    25                             aler('上传图片不符合要求');
    26                         } else if (data.code == 102){
    27                             var update_vip_url = 'update_vip_url';
    28                             alert('您目前是普通会员,图片文件不可超过5M|升级会员可上传更大文件立即升级会员');
    29                         } else if (data.code == 103) {
    30                             alert('您目前是VIP会员,图片文件不可超过50M');
    31                         }
    32                         
    33                     }
    34                 };
    35                 //设置超时时间    
    36                 xhr.timeout = 100000;    
    37                 xhr.ontimeout = function(event){}
    38             }

    这里是针对一个按钮可多选的上传,也就是input加上了 multiple="multiple" 属性。change事件触发的。后台用的springMVC框架。

    1 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;           
    2 Iterator<String> names = multipartRequest.getFileNames();
    3 
    4 while (names.hasNext()) {
    5                     String name = (String) names.next();
    6                     MultipartFile multipartFile = multipartRequest.getFile(name);
    7 }

    这里用循环拿到文件,就可以进行上传操作了。

    这里只是工作中遇到了,记录一下,考虑并不周全。js也是百度之后,找不到原页了,所以就不附转载地址了。见谅。

  • 相关阅读:
    Javaの网络数据传输之Socket
    AndroidのActivity跳转数据通信和跳转动画
    Androidの系统服务之getSystemService
    AndroidのUI设计研究(一)——自定义ProgressBar
    AndroidのService与Activity的及时通信
    Javaの网络数据传输之Http消息格式
    AndroidのActivity之后台隐藏
    《大道至简》读后感
    第一周
    第四周
  • 原文地址:https://www.cnblogs.com/ireenin/p/6610081.html
Copyright © 2020-2023  润新知