javascript - 计算使用 input=file 选择的图像数量

Question

在 PHP 中有一种方法可以在输入中显示从“input=file”中选择的文件数吗？ 像这样。

我只看到在输入外的标签中打印数字的代码，像这样(来自这个问题 HTML5 Get input file count on change )

    $('input[type=file]').change(function () {
    fileCount = this.files.length;
    $(this).prev().text(fileCount + 'Selected');
})

但我不明白如何将值放入输入中...也许放在“值”中？

这是我的输入代码

<div id="file-ins-immagini">
    <div class="et-form-ins">Aggiungi immagini</div>
    <input type="file" name="file-input[]" id="file-input" value="" class="file" multiple>  
</div>

谢谢!

Answer 1

使用普通的 Javascript 或 jQuery 来做到这一点非常简单:

/* Input Files Count */

$("body").on("change", function () {
    var numFiles = $("input", this)[0].files.length;
    $('.browseFiles').addClass('active'); // optional css for active
});

上面的代码创建了一个函数，它只计算您从表单按钮中选择的任何内容。使用 jQuery 可以让样式元素(css/鼠标悬停效果)更具创造力，但这不是必需的。

/* Input Files Count */

$("body").on("change", function() {
  var numFiles = $("input", this)[0].files.length;
  $('.browseFiles').addClass('active');
});

/* MouseOver Effects */

$('.browseFiles').mouseover(function() {
  $(this).addClass('over');

}).mouseout(function() {
  $(this).removeClass('over');
});

/ #wrapper {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.browseTitle {
    font-family: Helvetica Neue;
    font-size: 14px;
    color: black;
    padding: 8px 6px 8px 6px;
    width: 610px;
    float: left;
    _float: none;
    background: #eee;
    border-radius: 5px;
    border: 2px solid #FFFFFF;
    cursor: pointer;
}
.browseFiles {
    font-family: menlo;
    font-size: 11px;
    padding: 2px 2px 2px 2px;
    width: 620px;
    float: left;
    _float: none;
    background: #ddd;
    border-radius: 5px;
    cursor: pointer;
}
.on {
    background: #77a509;
}
.over {
    background: #eee;
}
.active {
    background: #9ad60c;
}
.button, input, select {
    font-family : inherit;
    font-size : 100%;
}
.button {
    position : inline;
    padding : 5px;
    font : bold 1.2em sans-serif;
    background : none;
    cursor : pointer;
}
.button:hover, .button:focus {
    outline : none;
    background: #9ad60c;
    color : #000;
    border-radius: 5px;
    border: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="browseTitle">Immagini Allegate</div>
  <div class="browseFiles">
    <form enctype="multipart/form-data" class="button">
      <input type="file" name="uploadFile[]" multiple="multiple" />
    </form>
  </div>
</div>