Question

在this W3schools example中，输入元素上的console.log显示一个FileInput对象：

FileList {0: File, 1: File, length: 2}

我该如何使用它？该示例演示了如何访问该文件，但每次用户选择新文件时，旧文件都会消失。如何创建一个新的空FileList并将其复制，以便用户可以向FileList添加更多文件？

我尝试了这个，但它产生了两个FileList对象，而不是一个包含所有文件的FileList：

var fileStore = x.files;

function myFunction(){
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore += x.files;
            console.log(x.files);
            console.log(fileStore);

Answer 1

未经测试，但这应该有效

var fileStore = [];

function myFunction(){
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore.push.apply(fileStore,x.files);
            console.log(x.files);
            console.log(fileStore);

More on Array::push

Answer 2

无法将//This gathers the values from the form (search bar) and assigns it to the variable $SearchThis //isset() $SearchThis = isset($_POST['Search']) ? $_POST['Search'] : ''; //empty() $SearchThis = !empty($_POST['Search']) ? $_POST['Search'] : ''; // Grabs the csv file (and its existing data) and makes it into an array $csv = array(); $lines = file('data/StaffData.csv', FILE_IGNORE_NEW_LINES); foreach ($lines as $key => $value) { $csv[$key] = str_getcsv($value); } //A new array which will display the search results $new_csv = array(); //This displays which rows have matched the search (it is put in an array) //Looks through full names $keys = array_keys(array_column($csv, 0), $SearchThis); // original code foreach($keys as $index) { // Iterate over the keys $new_csv[] = $csv[$index]; // Copy the matching rows to our new array } //Looks through phone numbers $keys = array_keys(array_column($csv, 1), $SearchThis); // original code foreach($keys as $index) { // Iterate over the keys $new_csv[] = $csv[$index]; // Copy the matching rows to our new array } //Looks through gender $keys = array_keys(array_column($csv, 2), $SearchThis); // original code foreach($keys as $index) { // Iterate over the keys $new_csv[] = $csv[$index]; // Copy the matching rows to our new array } //Looks through Birthday $keys = array_keys(array_column($csv, 3), $SearchThis); // original code foreach($keys as $index) { // Iterate over the keys $new_csv[] = $csv[$index]; // Copy the matching rows to our new array } //Looks through Type of work $keys = array_keys(array_column($csv, 4), $SearchThis); // original code foreach($keys as $index) { // Iterate over the keys $new_csv[] = $csv[$index]; // Copy the matching rows to our new array }个对象添加到File。您可以使用FileList将FormData附加到单个对象。

Files

Answer 3

一个数组可以保留File个实例，但如果你想在某个地方上传它们，FormData会更好。如果要注销或查看FormData，可将其变为Map。请注意，FormData是可迭代的。

var formData = new FormData();
var index = 0;

function onDrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

  for (var i = 0; i < files.length; i++) {    
    formData.append(files[i].name, files[i]);
  }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  console.dir(new Map(formData));
}

See this JSBin.

如何在Javascript中使用FileList（来自<input type =“file”/>）？

3 个答案: