ajax多文件上傳,js原生ajax請求(轉)

　　　　　　function uploadImageFile(){    
                var xhr = new XMLHttpRequest();
                //定義表單變量    
                var file = document.getElementById('imageFiles').files;    
                //新建一個FormData對象    
                var formData = new FormData();
                //追加文件數據    
                for(i=0;i<file.length;i++){      
                     formData.append("file["+i+"]", file[i]);
                }     
                    
                //post方式    
                xhr.open('POST', memberPath + "/backstage/photo/uploadPhoto.json"); 
                //發送請求    
                xhr.send(formData);
                //success回調    
                xhr.onreadystatechange = function(){
                    if ( xhr.readyState == 4 && xhr.status == 200 ) {
                        console.log( xhr.responseText );    
                        var data = xhr.responseText;
                        data = JSON.parse(xhr.responseText)    
                        if (data.code == 100) {
                            //insertPhotoList(data.userPhotos); 這里傳過來的是一個List<model>，做頁面邏輯處理的
                        } else if (data.code == 101) {
                            aler('上傳圖片不符合要求');
                        } else if (data.code == 102){
                            var update_vip_url = 'update_vip_url';
                            alert('您目前是普通會員，圖片文件不可超過5M|升級會員可上傳更大文件立即升級會員');
                        } else if (data.code == 103) {
                            alert('您目前是VIP會員，圖片文件不可超過50M');
                        }
                        
                    }
                };
                //設置超時時間    
                xhr.timeout = 100000;    
                xhr.ontimeout = function(event){}
            }

這里是針對一個按鈕可多選的上傳，也就是input加上了 multiple="multiple" 屬性。change事件觸發的。后台用的springMVC框架。

 

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;           
Iterator<String> names = multipartRequest.getFileNames();

while (names.hasNext()) {
                    String name = (String) names.next();
                    MultipartFile multipartFile = multipartRequest.getFile(name);
}

這里用循環拿到文件，就可以進行上傳操作了。

 

這里只是工作中遇到了，記錄一下，考慮並不周全。js也是百度之后，找不到原頁了，所以就不附轉載地址了。見諒。