减少文件上传输入字段中的计数

Question

我想弄清楚的是当用户删除文件时减少计数（请参阅下图）。

目前，我有一个脚本可以生成图像预览，后跟图像名称。我想要实现的是当用户决定删除图像时，计数会下降一个或多个，具体取决于删除的图像数量。

目前，我可以计算显示的图像数量，这是我显示或隐藏“删除所有图像”按钮的方式，但无法确定如何减少计数并显示仍然选择了多少文件。任何帮助将不胜感激。

/*Upload Image and Preview in form*/
//When user clicks on Remove All Images Button
$(document).ready(function() {
    $("#delete_all").click(function(){
        $(".pip").remove();
        $("#delete_all").hide();
        $('#files').val('');
    });
    //Checks how many images still in form and whether 
    //Remove All Images button should be displayed
    $(document).on("click", ".remove", function(){
        if($(".pip").length > 1)
            $("#delete_all").show();
        else
            $("#delete_all").hide();
    });
    //If clear button is clicked, hides Remove All Images button
     $(document).on("click", "#clear", function(){
        if($(".pip").length < 1)
            $("#delete_all").hide();
    });
    //Process to upload and Preview Images being uploaded
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(a) {
            var files = a.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.fileName = files[i].name;
                fileReader.onload = (function(e) {
                    var file = e.target;
                    if(filesLength > 1){
                        $("<div class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 
                        "<br />" + "<span class=\"fontImage\">" + file.fileName + "</span><br/><span class=\"remove\">x</span>" + "</div>").insertAfter("#files");
                    }
                    else{
                        $("<div class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 
                        "<br />" + "<span class=\"remove\">x</span>" + "</div>").insertAfter("#files");
                    }
                    $(".remove").on('click', function(){
                        $(this).parent(".pip").remove();
                        if($(".pip").length < 1){
                            $('#files').val('');
                        }
                    });
                    if($(".pip").length > 1)
                        $("#delete_all").show();
                    else
                        $("#delete_all").hide();
                });             
                fileReader.readAsDataURL(f);
            }
       });
    } 
    // /*else {
        //alert("Your browser doesn't support to File API.");
    // }*/
});
/***********************/

以下是我添加图片的地方

<fieldset>
    <legend><span class="number">3</span> Image Attachment (Optional)</legend>
    <input type="file" id="files" name="files[]" multiple accept=".jpg, .jpeg, .png" />
    <input type="button" class="button small-btn" value="Remove All Image" id="delete_all" style="display:none;"/>
</fieldset>
<input onclick="return checkForm(this.form);" type="submit" value="Submit" />
<input onclick="return resetForm(this.form);" type="reset" value="Clear" id="clear" />

更新：我能够创建自己的上传图片并隐藏html输入文件字段。但是，我无法想出增加或减少计数。这就是我到目前为止所做的：

    <div class="backgroundColor">
        <div style="float: left">
          <a id="fileupload" class="create-btn-file no-style">Chose Files</a>
        </div> 
        <div class="textStyle">
          <span id="replaceText">No file chosen</span>
        </div>
    </div>
    <input type="file" id="files" class="reduceMargin" name="files[]" multiple />

    /*Anchor Tag acts like the input file tag*/
      $("#fileupload").click(function(){
         $("#files").click();
      });

以下是为锚标记提供按钮外观的css：

    /*Create my own 'Choose Files input file button'*/
#files{
    display:none;
}
.no-style {
    text-decoration: none !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    color: #8a97a0;
}
/*.no-style:hover{
    color: #8a97a0;
}*/
.create-btn-file {
    position: relative;
    overflow: hidden;
}
.create-btn-file{
    display: block;
  width: 100%;
  height: 25px;
  background: #e8eeef;
  padding: 1px;
  text-align: center;
  border:1px solid #D3D3D3; 
  border-radius: 3px;
  color: black;
  font-size: 16px;
  text-decoration: none !important;
  font-family: Georgia, "Times New Roman", Times, serif;
  cursor: pointer;
  filter: alpha(opacity=0);
  margin-left: 7px;
  margin-top: 3px;
}
.textStyle{
    color: #8a97a0;
  margin-left: 14px;
  margin-top: 4px;
  float: left;
  font-size: 16px;
}
.reduceMargin{
    margin-bottom:0px !important
}
.backgroundColor{
    background: white;
    height: 40px;
    margin-bottom: 25px;
    border-radius: 4px;
    padding-top: 3px;
}
/***********/