在JavaScript/jQuery中，.files[0]代表什么？

Question

当通过ajax上传图片时，遇到类似于这样的情况：

$("input#uploadedfile").on("change", function(){
   var file = this.files[0],
});

假设 #uploadedfile 是一个文件类型的输入框，那么 this.files[0] 是否只是针对第一个上传的文件？另外，这个 jQuery 代码是否执行了完全相同的操作？

var file = $(this).get(0).files[0]

- Zorgan

---

第一个文件将要上传。是的。是的。 - Igor

是的，我的错，那就是我想说的。 - Zorgan

Answer 1

元素的files属性返回一个FileList对象。如果this是一个元素，那么this.files[0]将返回索引为0的File对象。 $(this).get(0)返回jQuery对象的第一个元素（请记住，每个jQuery对象也是数组）。因此，$(this).get(0).files[0]是访问this.files[0]值的另一种方式。

- ughitsaaron

Answer 2

<li class="list-group-item active"><h5>Feaured Image</h5></li>
            <li class="list-group-item">
                <div class="input-group mb-3">
                    <div class="custom-file ">
                        <input type="file"  class="custom-file-input" name="thumbnail" id="thumbnail">
                        <label class="custom-file-label" for="thumbnail">Choose file</label>
                    </div>
                </div>
                <div class="img-thumbnail  text-center">
                    <img src="@if(isset($product)) {{asset('storage/'.$product->thumbnail)}} @else {{asset('images/no-thumbnail.jpeg')}} @endif" id="imgthumbnail" class="img-fluid" alt="">
                </div>
            </li>
<script>
$(function(){
$('#thumbnail').on('change', function() {
    var file = $(this).get(0).files;
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.addEventListener("load", function(e) {
    var image = e.target.result;
$("#imgthumbnail").attr('src', image);
});
});
}
</script>

- MOAZZAM RASOOL

---

我认为你需要在这里提供一些解释，Moazzam - 运行代码肯定会展示它的功能，但我认为一些澄清的文字也会有所帮助。 - Kalle