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也是百度之后,找不到原页了,所以就不附转载地址了。见谅。