blocks|key|2837262|text|这将逐个读取文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2837263|function+readmultifiles(files)+{
++++var+ul+=+document.querySelector("#bag>ul");
++++while+(ul.hasChildNodes())+{
++++++++ul.removeChild(ul.firstChild);
++++}
++++//+Read+first+file
++++setup_reader(files,+0);
}

//+Don't+define+functions+in+functions+in+functions,+when+possible.

function+setup_reader(files,+i)+{
++++var+file+=+files[i];
++++var+name+=+file.name;
++++var+reader+=+new+FileReader();
++++reader.onload+=+function(e){
++++++++++++++++++++++++readerLoaded(e,+files,+i,+name);
++++++++++++++++++++};
++++reader.readAsBinaryString(file);
++++//+After+reading,+read+the+next+file.
}

function+readerLoaded(e,+files,+i,+name)+{
++++//+get+file+content++
++++var+bin+=+e.target.result;
++++//+do+sth+with+text

++++var+li+=+document.createElement("li");
++++li.innerHTML+=+name;
++++ul.appendChild(li);

++++//+If+there's+a+file+left+to+load
++++if+(i+<+files.length+-+1)+{
++++++++//+Load+the+next+file
++++++++setup_reader(files,+i%2B1);
++++}
}|code-block|syntax|javascript|2837264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This should read the files one by one:</p>

<pre><code>function readmultifiles(files) {
    var ul = document.querySelector("#bag&gt;ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    // Read first file
    setup_reader(files, 0);
}

// Don't define functions in functions in functions, when possible.

function setup_reader(files, i) {
    var file = files[i];
    var name = file.name;
    var reader = new FileReader();
    reader.onload = function(e){
                        readerLoaded(e, files, i, name);
                    };
    reader.readAsBinaryString(file);
    // After reading, read the next file.
}

function readerLoaded(e, files, i, name) {
    // get file content  
    var bin = e.target.result;
    // do sth with text

    var li = document.createElement("li");
    li.innerHTML = name;
    ul.appendChild(li);

    // If there's a file left to load
    if (i &lt; files.length - 1) {
        // Load the next file
        setup_reader(files, i+1);
    }
}
</code></pre>


blocks|key|205786|text|我自己想出了一个有效的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205787|function+readmultifiles(files)+{
++var+reader+=+new+FileReader();++
++function+readFile(index)+{
++++if(+index+>=+files.length+)+return;
++++var+file+=+files[index];
++++reader.onload+=+function(e)+{++
++++++//+get+file+content++
++++++var+bin+=+e.target.result;
++++++//+do+sth+with+bin
++++++readFile(index%2B1)
++++}
++++reader.readAsBinaryString(file);
++}
++readFile(0);
}|code-block|syntax|javascript|205788|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I came up with a solution myself which works.</p>

<pre><code>function readmultifiles(files) {
  var reader = new FileReader();  
  function readFile(index) {
    if( index &gt;= files.length ) return;
    var file = files[index];
    reader.onload = function(e) {  
      // get file content  
      var bin = e.target.result;
      // do sth with bin
      readFile(index+1)
    }
    reader.readAsBinaryString(file);
  }
  readFile(0);
}
</code></pre>


blocks|key|2837320|text|我更新这个问题是为了让新用户受益，他们正在寻找通过the+FileReader+API上传多个文件的解决方案，特别是使用ES。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2837321|与手动迭代每个文件相比，使用Object.keys(files)+in+ES要简单得多|style|CODE|2837322|<input+type="file"+onChange="readmultifiles"+multiple/>
<script>
function+readmultifiles(e)+{
++const+files+=+e.currentTarget.files;
++Object.keys(files).forEach(i+=>+{
++++const+file+=+files[i];
++++const+reader+=+new+FileReader();
++++reader.onload+=+(e)+=>+{
++++++//server+call+for+uploading+or+reading+the+files+one-by-one
++++++//by+using+'reader.result'+or+'file'
++++}
++++reader.readAsBinaryString(file);
++})
};
</script>|code-block|syntax|javascript|2837323|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/FileReader|1|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys^0|P|I|0|0|E|I|E|O|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@$A|13|B|14|1|15]]|C|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>I'm updating this question for the benefit of new users, who are looking for a solution to upload multiple files via <a href="https://developer.mozilla.org/en/docs/Web/API/FileReader" rel="noreferrer">the FileReader API</a>, especially using ES.</p>

<p>Rather than manually iterating over each file, it's much simpler &amp; cleaner to use <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel="noreferrer"><code>Object.keys(files)</code> in ES</a>:</p>

<pre><code>&lt;input type="file" onChange="readmultifiles" multiple/&gt;
&lt;script&gt;
function readmultifiles(e) {
  const files = e.currentTarget.files;
  Object.keys(files).forEach(i =&gt; {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) =&gt; {
      //server call for uploading or reading the files one-by-one
      //by using 'reader.result' or 'file'
    }
    reader.readAsBinaryString(file);
  })
};
&lt;/script&gt;
</code></pre>


blocks|key|201374|text|我的完整解决方案在这里：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|201375|+<html>+<body>
++++<input+type="file"+id="filesx"+name="filesx[]"
++++++onchange="readmultifiles(this.files)"+multiple=""/>
++++<div+id="bag"></div>
<script>
window.onload+=+function()+{
++++if+(typeof+window.FileReader+!==+'function')+{
++++++++alert("The+file+API+isn't+supported+on+this+browser+yet.");
++++}
}

function+readmultifiles(files)+{
++var+reader+=+new+FileReader();++
++function+readFile(index)+{
++++if(+index+>=+files.length+)+return;
++++var+file+=+files[index];
++++reader.onload+=+function(e)+{++
++++++//+get+file+content++
++++++var+bin+=+e.target.result;
++++++//+do+sth+with+bin
++++++readFile(index%2B1)
++++}
++++reader.readAsBinaryString(file);
++}
++readFile(0);

+function+setup_reader(file)+{
++++++++var+name+=+file.name;
++++++++var+reader+=+new+FileReader();

++++++++++++var+ul+=+document.createElement("ul");
++++++++++++document.getElementById('bag').appendChild(ul);
++++++++reader.onload+=+function(e)+{
++++++++++++var+bin+=+e.target.result;+//get+file+content

++++++++++++//+do+sth+with+text

++++++++++++var+li+=+document.createElement("li");
++++++++++++li.innerHTML+=+name;
++++++++++++ul.appendChild(li);
++++++++}
++++++++reader.readAsBinaryString(file);
++++}

++++for+(var+i+=+0;+i+<+files.length;+i%2B%2B)+{+setup_reader(files[i]);+}
}
</script>+</body>+</html>|code-block|syntax|javascript|201376|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My complete solution is here:</p>

<pre><code> &lt;html&gt; &lt;body&gt;
    &lt;input type="file" id="filesx" name="filesx[]"
      onchange="readmultifiles(this.files)" multiple=""/&gt;
    &lt;div id="bag"&gt;&lt;/div&gt;
&lt;script&gt;
window.onload = function() {
    if (typeof window.FileReader !== 'function') {
        alert("The file API isn't supported on this browser yet.");
    }
}

function readmultifiles(files) {
  var reader = new FileReader();  
  function readFile(index) {
    if( index &gt;= files.length ) return;
    var file = files[index];
    reader.onload = function(e) {  
      // get file content  
      var bin = e.target.result;
      // do sth with bin
      readFile(index+1)
    }
    reader.readAsBinaryString(file);
  }
  readFile(0);

 function setup_reader(file) {
        var name = file.name;
        var reader = new FileReader();

            var ul = document.createElement("ul");
            document.getElementById('bag').appendChild(ul);
        reader.onload = function(e) {
            var bin = e.target.result; //get file content

            // do sth with text

            var li = document.createElement("li");
            li.innerHTML = name;
            ul.appendChild(li);
        }
        reader.readAsBinaryString(file);
    }

    for (var i = 0; i &lt; files.length; i++) { setup_reader(files[i]); }
}
&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
</code></pre>


blocks|key|204176|text|您必须为要读取的每个文件实例化一个FileReader。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204177|function+readFiles(event)+{
++//Get+the+files
++var+files+=+event.input.files+%7C%7C+[];
++if+(files.length)+{
++++for+(let+index+=+0;+index+<+files.length;+index%2B%2B)+{
++++++//instantiate+a+FileReader+for+the+current+file+to+read
++++++var+reader+=+new+FileReader();
++++++reader.onload+=+function()+{
++++++++var+result+=+reader.result;
++++++++console.log(result);+//File+data
++++++};
++++++reader.readAsDataURL(files[index]);
++++}
++}
}|code-block|syntax|javascript|204178|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You must <strong>instantiate a FileReader for each file</strong> to read. </p>

<pre class="lang-js prettyprint-override"><code>function readFiles(event) {
  //Get the files
  var files = event.input.files || [];
  if (files.length) {
    for (let index = 0; index &lt; files.length; index++) {
      //instantiate a FileReader for the current file to read
      var reader = new FileReader();
      reader.onload = function() {
        var result = reader.result;
        console.log(result); //File data
      };
      reader.readAsDataURL(files[index]);
    }
  }
}

</code></pre>


blocks|key|3050222|text|将这些答案中最好的部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3050223|<input+type="file"+onchange="readmultifiles(this.files)"+multiple+/>
<script>
function+readmultifiles(files)+{
++for+(file+of+files)+{
++++const+reader+=+new+FileReader();
++++reader.readAsBinaryString(file);
++++reader.fileName+=+file.name;
++++reader.onload+=+(event)+=>+{
++++++const+fileName+=+event.target.fileName;
++++++const+content+=+event.currentTarget.result;
++++++console.log({+fileName,+content+});
++++};
++}
}

</script>|code-block|syntax|javascript|3050224|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Taking the best parts of these answers.</p>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;file&quot; onchange=&quot;readmultifiles(this.files)&quot; multiple /&gt;
&lt;script&gt;
function readmultifiles(files) {
  for (file of files) {
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.fileName = file.name;
    reader.onload = (event) =&gt; {
      const fileName = event.target.fileName;
      const content = event.currentTarget.result;
      console.log({ fileName, content });
    };
  }
}

&lt;/script&gt;
</code></pre>


blocks|key|204186|text|我使用现代JS+(Map，Iterator)实现了另一个解决方案。我改编了我的Angular应用程序的代码(最初是用一些TS特性编写的)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204187|正如Steve+KACOU提到的，我们为每个文件创建不同的FileReader实例。|204188|<input+type="file"+id="filesx"+name="filesx[]"
++++++onchange="processFileChange(this)"+multiple=""/>|code-block|syntax|javascript|204189|++++function+processFileChange(event)+{
++++++++if+(event.target.files+&&+event.target.files.length)+{
++++++++++++const+fileMap+=+new+Map();

++++++++++++for+(let+i+=+0;+i+<+event.target.files.length;+i%2B%2B)+{
++++++++++++++++const+file+=+event.target.files[i];
++++++++++++++++const+fileReader+=+new+FileReader();
++++++++++++++++fileMap.set(fileReader,+file);
++++++++++++}

++++++++++++const+mapEntries+=+fileMap.entries();
++++++++++++readFile(mapEntries);
++++++++}
++++}

++++function+readFile(mapEntries)+{
++++++++const+nextValue+=+mapEntries.next();

++++++++if+(nextValue.done+===+true)+{
++++++++++++return;
++++++++}

++++++++const+[fileReader,+file]+=+nextValue.value;

++++++++fileReader.readAsDataURL(file);
++++++++fileReader.onload+=+()+=>+{
++++++++++++//+Do+black+magic+for+each+file+here+(using+fileReader.result)

++++++++++++//+Read+the+next+file
++++++++++++readFile(mapEntries);
++++++++};
++++}|204190|基本上，这利用了通过引用传递对象的优势，以使映射在每次迭代中保持不变。在我看来，这使得代码非常容易阅读。|204191|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I implemented another solution using modern JS (Map, Iterator). I adapted the code from my Angular application (originally written with some TS features).</p>
<p>Like Steve KACOU mentioned, we create a different FileReader instance for each file.</p>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;file&quot; id=&quot;filesx&quot; name=&quot;filesx[]&quot;
      onchange=&quot;processFileChange(this)&quot; multiple=&quot;&quot;/&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>    function processFileChange(event) {
        if (event.target.files &amp;&amp; event.target.files.length) {
            const fileMap = new Map();

            for (let i = 0; i &lt; event.target.files.length; i++) {
                const file = event.target.files[i];
                const fileReader = new FileReader();
                fileMap.set(fileReader, file);
            }

            const mapEntries = fileMap.entries();
            readFile(mapEntries);
        }
    }

    function readFile(mapEntries) {
        const nextValue = mapEntries.next();

        if (nextValue.done === true) {
            return;
        }

        const [fileReader, file] = nextValue.value;

        fileReader.readAsDataURL(file);
        fileReader.onload = () =&gt; {
            // Do black magic for each file here (using fileReader.result)

            // Read the next file
            readFile(mapEntries);
        };
    }
</code></pre>
<p>Basically this takes advantage of passing objects by reference to perpetuate the map with every iteration. This makes the code quite easy to read in my opinion.</p>


blocks|key|205837|text|使用multiple属性定义输入：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|205838|<input+onchange+=+'upload(event)'+type+=+'file'+multiple/>|code-block|syntax|javascript|205839|定义upload函数：|205840|const+upload+=+async+(event)+=>+{
++
++++//+Convert+the+FileList+into+an+array+and+iterate
++++let+files+=+Array.from(event.target.files).map(file+=>+{

++++++++//+Define+a+new+file+reader
++++++++let+reader+=+new+FileReader();

++++++++//+Create+a+new+promise
++++++++return+new+Promise(resolve+=>+{

++++++++++++//+Resolve+the+promise+after+reading+file
++++++++++++reader.onload+=+()+=>+resolve(reader.result);

++++++++++++//+Read+the+file+as+a+text
++++++++++++reader.readAsText(file);

++++++++});

++++});

++++//+At+this+point+you'll+have+an+array+of+results
++++let+res+=+await+Promise.all(files);
++
}|205841|entityMap^0|2|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Define the input using <code>multiple</code> property:</p>
<pre><code>&lt;input onchange = 'upload(event)' type = 'file' multiple/&gt;
</code></pre>
<p>Define the upload function:</p>
<pre class="lang-js prettyprint-override"><code>const upload = async (event) =&gt; {
  
    // Convert the FileList into an array and iterate
    let files = Array.from(event.target.files).map(file =&gt; {

        // Define a new file reader
        let reader = new FileReader();

        // Create a new promise
        return new Promise(resolve =&gt; {

            // Resolve the promise after reading file
            reader.onload = () =&gt; resolve(reader.result);

            // Read the file as a text
            reader.readAsText(file);

        });

    });

    // At this point you'll have an array of results
    let res = await Promise.all(files);
  
}
</code></pre>


blocks|key|2837407|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2837408|const+setFileMultiple+=+(e)+=>+{
++e.preventDefault();
++//Get+the+files
++let+file+=+[...e.target.files]+%7C%7C+[];

++file.forEach((item,+index)+=>+{
++++let+reader+=+new+FileReader();

++++reader.onloadend+=+()+=>+{
++++++console.log("result",+reader.result);
++++};
++++reader.readAsDataURL(file[index]);
++});

};|code-block|syntax|javascript|2837409|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this</p>
<pre><code>const setFileMultiple = (e) =&gt; {
  e.preventDefault();
  //Get the files
  let file = [...e.target.files] || [];

  file.forEach((item, index) =&gt; {
    let reader = new FileReader();

    reader.onloadend = () =&gt; {
      console.log(&quot;result&quot;, reader.result);
    };
    reader.readAsDataURL(file[index]);
  });

};
</code></pre>


<p>I'm using the <strong>FileReader</strong> API to read multiple files.</p>

<pre><code>&lt;html&gt; &lt;body&gt;
    &lt;input type="file" id="filesx" name="filesx[]"
      onchange="readmultifiles(this.files)" multiple=""/&gt;
    &lt;div id="bag"&gt;&lt;ul/&gt;&lt;/div&gt;
&lt;script&gt;
window.onload = function() {
    if (typeof window.FileReader !== 'function') {
        alert("The file API isn't supported on this browser yet.");
    }
}

function readmultifiles(files) {
    var ul = document.querySelector("#bag&gt;ul");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }

    function setup_reader(file) {
        var name = file.name;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bin = e.target.result; //get file content

            // do sth with text

            var li = document.createElement("li");
            li.innerHTML = name;
            ul.appendChild(li);
        }
        reader.readAsBinaryString(file);
    }

    for (var i = 0; i &lt; files.length; i++) { setup_reader(files[i]); }
}
&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
</code></pre>

<p>The problem is that all files are read at the same time, and when the files have a total size (sum) that is very large, the browser crashes.</p>

<p>I want to read one file after another, so that the memory consumption is reduced.</p>

<p>Is this possible?</p>


Reading multiple files with Javascript FileReader API one at a time

我正在使用FileReader API读取多个文件。<html> <body>    <input type="file" id="filesx" name="filesx[]"      onchange="readmultifiles(this.files)" multiple=""/>    <div id="b...

问使用Javascript FileReader API一次读取多个文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript FileReader API一次读取多个文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript FileReader API一次读取多个文件
EN