從文件對話框中選擇文件并單擊“確定”后，如何改進(jìn)此代碼以消除無響應(yīng)/頁面延遲？我一直在測試大小約為 50-100 KB 的文件function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';}document.getElementById('files').addEventListener('change', handleFileSelect, false);<input type="file" id="files" name="files[]" multiple /><output id="list"></output>我在本地主機(jī)上運(yùn)行此頁面并且使用 SSD
3 回答
幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗 獲得超8個贊
您的代碼可以運(yùn)行并且沒有任何問題。您只能通過首先對其進(jìn)行測量然后采取適當(dāng)?shù)牟僮鱽硖岣咝阅堋?/p>
例如，您可以將代碼重構(gòu)為更簡潔的方法 -
let handleFileSelect = (evt) => {
let files = evt.target.files; // FileList object
let output = [...files].map((file) => {
return `<li>
<strong>${escape(file.name)}</strong>
(${file.type || "n/a"}) - ${file.size} bytes,
last modified: ${
file.lastModifiedDate
? file.lastModifiedDate.toLocaleDateString()
: "n/a"
}
</li>`;
});
document.getElementById("list").innerHTML = `<ul>${output.join("")}</ul>`;
};
document
.getElementById("files")
.addEventListener("change", handleFileSelect, false);
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
- 3 回答
- 0 關(guān)注
- 213 瀏覽
添加回答
舉報
0/150
提交
取消