新增前：

新增後：

刪除後：

程式碼：
1.html

<tr>
            <td style="width: 100px;text-align: right">
                附件：
            </td>
            <td>
                <div id="file1_div">選擇檔案<input type="file"  name="files" id="file1" /></div>
                <input
 
 type="hidden" id="filepaths"  name="info[filepaths]" />
                <input type="hidden"  onclick="uploadImg()" value="上傳"/>
                <ul id="img_list">
                </ul>
            </td>
        </tr>

2.js

 var xls = "__STATIC__/img/xls.jpg";
    var txt = "__STATIC__/img/txt.jpg"
 
;
    var zip = "__STATIC__/img/zip.jpg";
    var filepathsArr = [];
     $(function(){
        $("#filepaths").on("click",function(){
            var formData = new FormData();
            formData.append("myfile", document.getElementById("file1").files[0]);
            $.ajax({
                url: "<{:U('Upload/uploadFels')}>"
 
,
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    filepathsArr.push(data);
                    $('#filepaths').val(filepathsArr.join(";"));
                    var imgurl = data;
                    if(data.indexOf("zip")>-1){
                        $("#img_list").append('<li><img class="this_fels" src="'+zip+'" alt=""/><a ><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                    }else if(data.indexOf("xls")>-1){
                        $("#img_list").append('<li><img class="this_fels" src="'+xls+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                    }else if(data.indexOf("txt")>-1){
                        $("#img_list").append('<li><img class="this_fels" src="'+txt+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                    }else{
                        $("#img_list").append('<li><img class="this_fels" src="'+data+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i> </a></li>');
                    }
                },
                error: function () {
                    alert("上傳失敗！");
                }
            });
        })
        $("#file1").on("change",function(){
            $("#filepaths").trigger("click");
        })
    })
    //刪除方法
    function deleteimg(e){
        var parent = e.parentNode;
        var parentNode = parent.parentNode
        $.get("<{:U('Upload/deleteThisFels')}>",{filepaths:e.value},function(rel){
            parentNode.remove();
        })
    }

3.THINKPHP

public function  deleteThisFels(){
   $data= ".".$_GET["filepaths"];
   unlink($data);
   dump($data);
}
public function uploadFels(){
   $config = C('UPLOAD_CONFIG');
   $upload = new \Think\Upload($config);
   $info = $upload->upload();
   if(!$info) {// 上傳錯誤提示錯誤資訊
      $this->error($upload->getError());
   }else{// 上傳成功
      $saveFiles = array();
      foreach($info as $item){
         $saveFilePath = substr($config['rootPath'],1).$item['savename'];
         array_push($saveFiles,$saveFilePath);
      }
      echo implode(";",$saveFiles);
   }
}

4.css

ul,li{
    list-style-type:none;

}
#file1_div{
    width: 100px;
    background: #ff9d02;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    display: block;
    float: left;
    position: relative;
}
#file1_div input{
    opacity: 0;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    z-index: 1;
    display: block;
}
#file1_div~input{
    float: left;
    box-sizing: border-box;
    box-shadow: none;
    width: 50px;
    height: 40px;
}
#img_list{
    padding: 0px;
    margin: 0px;
    width: 100%;
    float: left;
    min-height: 100px;
    background: #eaedf3;
}
#img_list li{
    border: 1px solid #ff9d02;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}
#img_list li a{
    position: absolute;
    top:0;
    right: 0;
    line-height: 30px;
    width: 30px;
    text-align: center;
    height: 30px;
    color: #fff;
    display: block;


}
#img_list li a input{
    width: 100%;
    position: absolute;
    background-size: 100% 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
#img_list li .this_fels{
    width: 100%;
    height: 100%;
    float: left;
}
#img_list li a i{
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% 100% ;
}