上傳文件夾 javascript

Question

我在網上查看如何上傳圖像文件夾並使用 JavaScript 顯示它們，我反復看到此代碼：

var inps = document.querySelectorAll('input');
[].forEach.call(inps, function(inp) {
  inp.onchange = function(e) {
    console.log(this.files);
  };
});   

首先，它在我的谷歌瀏覽器上不起作用（它沒有記錄任何內容），更重要的是，這種方法是做什么的

[].forEach.call

這是什么意思？ （在 forEach 之前使用 []）？

Answer 1

BLOB - 二進制大 Object

如果你想預覽加載的圖像，你應該創建 blob。 URL 將圖像保存在文件庫或數據庫中后更正。

我的 GIT 集線器僅包含一張圖片的示例

[].forEach.call這只是規則，你得到了上面的答案。

developer.mozilla.org -> [].forEach.call

 let inps = document.querySelectorAll('input'); [].forEach.call(inps, function(inp) { inp.onchange = function(e) { console.log(URL.createObjectURL(this.files[0])) //create BLOB for preview if need for (file of this.files) { setFiles(file); //parsing all uploaded files createLIST(file, this.files.length); } }; }); //save all file to database by your URL -> URL_FOR_PROCESSING_POST function setFiles(file) { console.log(file); let request = new XMLHttpRequest(); let formData = new FormData(); formData.append(file.name, file); request.open('POST', 'URL_FOR_GET_POST'); request.send(formData); } arResult = []; function createLIST(file, count) { let html = '<ul>'; for (let item in file) { html += `<li><div>${item}</div> <div>${file[item]}</div></li>`; } html += '</ul>'; arResult.push(html); if (arResult.length === count) { document.querySelector('#output-data').innerHTML = arResult.join(''); } }

 .output-data { counter-reset: section; }.output-data ul { border-bottom: 1px solid grey; padding-bottom: 1rem; }.output-data ul:before { counter-increment: section; content: "File " counter(section) ": "; font-weight: bold; font-size: 20px; color: green; margin-bottom: 1rem; display: block; }.output-data li { display: flex; padding-bottom: 0.25rem; }.output-data li div:first-child { font-weight: bold; flex: 0 1 200px; }.output-data li div:last-child { text-align: left; }

 <input type="file" name="file" webkitdirectory directory> <div id="output-data" class="output-data"></div>