<input type='file'/>选择文件，通过ajax方式传递选择的文件，后端使用controller接受

要实现的功能：页面使用html5的上传控件<input type="file" />选择图片，所选图片可进行预览，然后可对某一张图片进行删除。然后将最终的图片列表上传；

问题：上传控件不允许通过js修改已选择的文件，所以不能实现单独删除功能；

解决方法：定义一个全局的数组变量用来存放图片文件列表。每次选择完图片后都将所选图片push到数组中，删除图片也是操作这个数组。然后将这个数组放到formdata内，通过ajax的方式传递给后台；

关键的代码片段：

<input type="file" id="files" multiple="multiple" οnchange="addFiles();"/>

<div class="preview"></div>

<button type="submit" id="uploadBtn">上传</button>

<script>

$(function{

fileStack=[];//存放图片文件的数组

             $("#uploadBtn").on("click", function() {
                 var formdata = new FormData();
                $.each(fileStack,function(i,file){//所有文件都要放到同一个名字下面：如files
                    formdata.append("files",file);
                 });
               $.ajax({  
                   url : "test",  
                   type : 'POST',
                   dataType: 'json',
                   data : formdata, 
                   cache: false,
                   processData: false,
                   contentType: false,
                   success : function(responseStr) {  
                       alert("成功");    
                   },  
                   error : function(responseStr) {  
                       alert("失败");
                   }  
               });
        });

});

        function addFiles(){
            var files = document.querySelector("input[type=file]");
            var filelist = files.files;//选择图片列表
            $.each(filelist,function(i,file){
                fileStack.push(file);
                var reader = new FileReader();  
                reader.onload = function(e){
                       var result = this.result;
                       var img = document.createElement("img");
                       img.src = result;
                       $(".preview").append(img);
                   };
                   reader.readAsDataURL(file);
            });
        }

</script>

后端接收代码：  

   @RequestMapping(value="/test",method=RequestMethod.POST)
    public void test(@RequestParam("files") MultipartFile[] files) throws IOException{
        for(MultipartFile file : files){
            String fileName = file.getOriginalFilename();
            System.out.print("文件："+fileName+" 上传成功");
        }
    }

其实很多代码看着并不陌生，似乎网上都有类似的，但是我之前在解决这个问题的时候，发现网上很多的搜索结果给的都是不完整的解决方法。导致我总是无法把代码连接起来。（关键是我比较菜。别人可能觉得没啥好说的，可是我却看不懂）。所以自己解决了这个问题后，写出来跟大家分享一下。有需要的看看就行，大神就当没看见，漠视就行了。第一次写自己的一些总结。凑活看吧！