Question

我想使用input type =“file”multiple =“multiple”html元素开始上传我刚刚选择的文件。

在关闭文件对话框并完成文件选择后，我可以直接在哪个事件中运行代码。

我的HTML代码如下所示：

<form enctype="multipart/form-data" action="/photo" method="post">
  <input type="hidden" name="section_id" value="234" />
  <input type="file" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
</form>

Answer 1

将更改eventListener添加到input：

var input = document.getElementById('input')
input.addEventListener('change', function(e){
  console.log(e);
  console.log(e.target.files); // a list of the files
});

Answer 2

$('input[type=file]').change(function (e) {
    console.log(e);
    console.log(e.target.files); //a list of the files
});

对于文件数组，您也可以按类型选择特定类。

    <input type="file" class="fileclassputhere" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />

<script>
    $('input[type=file].fileclassputhere').change(function (e) {
      console.log(e);
      console.log(e.target.files); //a list of the files
    });
</script>

Answer 3

这是一个不错的link of uploading multiple selected image

使用html输入文件多选择文件后的事件

3 个答案: