Question

PHP中有一种方法可以显示从输入中的＆＃34; input = file＆＃34;中选择的文件数量？这样的事情。

enter image description here

我只看到在输入外的标签中打印数字的代码，如下所示（来自此问题HTML5 Get input file count on change）

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

但我不明白如何将价值放在输入中......内部＆＃34;价值＆＃34;可能？

这是我的输入代码

<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 / mouseover效果）上获得更多创造力，但不是必需的。

＆＃13;

/* 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');
});

＆＃13;

/ #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;
}

＆＃13;

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

＆＃13;

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>

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

3 个答案: