Question

在页面上有一个上传按钮，允许用户上传文本文件，文件内容被输入到同一页面上的textarea框中。在Firefox中使用此功能测试3MB文本文件时，它可以正常工作。但是当与Chrome一起使用时，浏览器会锁定并且动画加载器会冻结一点，然后页面会再次响应。这是相关的js代码：

function getFile(event) {
  const input = event.target
  if ('files' in input && input.files.length > 0) {
    placeFileContent(document.getElementById('corpus'), input.files[0]);
    setTimeout(function() {
      $('#characters').text($('#corpus').val().length.toLocaleString());
      $('#words').text($('#corpus').val().trim().split(/\s+/).length.toLocaleString());
    }, 10);
  }
}

function placeFileContent(target, file) {
  readFileContent(file).then(content => {
    target.value = content;
  }).catch(error => console.log(error))
}

function readFileContent(file) {
  const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
};

上传按钮代码：

$('#uploadCorpus').on('change', function(event) {
  $("#corpus").LoadingOverlay("show");
  setTimeout(function() {
    getFile(event);
  }, 1000);
  $("#corpus").LoadingOverlay("hide", true);
})

我删除了动画，abd计算单词/字符，问题仍然存在。使用Chrome开发工具，滞后在文本读取后的布局操作中。当我将内容放入var时，浏览器中没有延迟。而不是更新textarea值，有没有其他方式更新而不锁定UI？用户将在提交给DB之前编辑该文件。

我禁用了拼写检查，自动填充等功能

Answer 1

即使粘贴大文本，这似乎也是Chrome中的一个问题。我通过检查文件大小来缓解它，如果超过x上传而没有在浏览器中查看文本。

var size = document.getElementById('uploadCorpus').files[0].size;

JavaScript更新textarea会冻结Chrome，但不会冻结Firefox

1 个答案: