统计使用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');
})

但我不明白如何才能将值放入input...inside " value“中？

这是我的输入代码

<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>

​

​

Answer 2

使用这个

var num_of_images = $("#file-input")[0].files.length;
alert(num_of_images);

Answer 3

下面是我使用JS编写的代码

​

function Filecount() {

  // GET THE FILE INPUT.
  var fi = document.getElementById('file');

  // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
  if (fi.files.length > 0) {

    // THE TOTAL FILE COUNT.
    document.getElementById('filep').innerHTML =
      'Total Files: <b>' + fi.files.length + '</b></br >';
  } else {
    alert('Please select a file.');
  }
}

<html>

<head>
  <title>Count-file</title></head>

<body>
  <p>
    <input type="file" id="file" multiple />
  </p>

  <!--SHOW RESULT HERE-->
  <p id="filep"></p>

  <p>
    <input type="submit" value="Show Details" onclick="Filecount()">
  </p>
</body>

</html>

​