1.需求圖示

2.按圖索驥

• 新增 實際上，新增附件就是<input type="file" id="myFile">的控制元件，var fileList = getElementById(myFile).files就可以得到選擇的檔案的FileList物件，這個物件是類陣列的物件(含義有點像函式引數arguments)。記住這一點很重要。

• 顯示 下面的顯示檔名的面板根據上傳的檔名name顯示

3.刨根問底

• FileList類陣列物件
  console.log(fileList)打印出來的結果顯示：
  bash
FileList
0:File
lastModified:1446204650848
lastModifiedDate:Fri Oct 30 2015 19:30:50 GMT+0800 (中國標準時間)
name:"CCGIS.png"
size:809542
type:"image/png"
webkitRelativePath:""
__proto__:File
length:1
__proto__:FileList

  
  思考：我們只需要能動態修改fileList即可，第一想法是將它轉化為陣列進行操作。
  files = Array.prototype.slice.call(files);

4.付諸行動

動手程式設計吧：
html很簡單，省略
邏輯程式碼

            var fileInput = document.getElementById('myFile');
            var files = fileInput.files; //filelist

            $('#myFile').on('change', function(event)
 
 {

                files = fileInput.files; //應該重新獲取
                console.log(files);

                files = Array.prototype.slice.call(files); //全部轉化為陣列
                fileLists = fileLists.concat(files);
                //顯示檔名面板
                if (files.length !== 0) {
                    var html = ''
 
;
                    for (var i = 0; i < files.length; i++) {
                        html += "<p>" + files[i].name + "&nbsp&nbsp<img class='icon-remove'></p>";
                    }
                    $('.upfile-list-mes').append(html);
                }
            });

           /*點選叉號可以刪除要上傳的檔案*/
            $('.upfile-list-mes').on('click', '.icon-remove', function(event) {
                var ind = $(this).parent().index();
                $(this).parent().css('display', 'none');
                fileLists.splice(ind, 1);//修改fileLists
                console.log(fileLists);
            });