javascript - 更改输入类型 ="file"的 innerHTML 会导致未捕获类型错误？

Question

JS 的新手，所以希望这是一个简单的修复。我正在尝试将 innerHTML 从“文件上传”更改为他们选择的文件的名称。这行得通，但是当我点击“上传”按钮时，出现了这个错误:

Uncaught TypeError: Cannot read property 'value' of null
at HTMLInputElement.upload

根据我的理解，它表示具有 id="upload" 的 html 元素不存在任何值，这令人困惑，因为具有该 ID 的 HTML 元素是一个按钮。

我的 HTML:

<form id="uploadForm" method="post" enctype="multipart/form-data">
  <label class="custom-file-upload" id="fileUploadLabel">
     <input type="file" name="file" id="dataUpload"/>File Upload
  </label>
  <input type="button" value="Upload" id="upload"/>
</form>

我的JS:

dom.byId('dataUpload').onchange = uploadOnChange;

function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    dom.byId('fileUploadLabel').innerHTML = filename;
}

on(dom.byId("upload"), "click", upload);
function upload(){
  //Disable the upload button after click
  functionalBtn("disable");
  //Check that form was fully filled out
  var dataUpload = dom.byId("dataUpload").value;
  if (dataUpload == ""){
    alert("Please choose a zip file to upload.");
    functionalBtn("enable");
    return false;
  }
  else if (!dataUpload.endsWith(".zip")){
    alert("The input file must be a zip file.");
    functionalBtn("enable");
  }
  else{
    //upload the zip file and get back the itemID (via uploadSucceeded)
    var upload = esri.request({  
      url: "https://xxxxxx", 
      form: dojo.byId("uploadForm"),  
      content: {f: 'json'},  
      handleAs: 'json',
    }).then(uploadSucceeded, uploadFailed); 
  }
}

当我更改标签文本时，我是否以某种方式更改了 id="dataUpload" 的值？在我的 upload() 函数中，我在点击上传按钮后检查 dataUpload 的值。

当我注释掉 dom.byId('fileUploadLabel').innerHTML = filename; 时，一切又都正常了(除了文件名没有显示在文件上传框中，这不是我想要的)想要)。

Answer 1

问题是 FileUploadLabel 的 innerHTML 不是 File Upload , 它是 <input type="file" id="dataUpload">File Upload .设置标签的 innerHTML 后，这变成了 MyFile.txt .

换句话说，元素dataUpload不存在了!

所以当你调用 dom.byId("dataUpload").value 时在 upload() 中，您将获得一个不存在的元素的值。此外，当您实际进行上传时，这显然会导致问题。

at HTMLInputElement.upload位并不是说上传丢失，它是 stack trace 的一部分, 说明错误发生在哪一段代码中。

您可能希望将标签文本(文件上传)放入单独的 <span> 中并改为设置它的 innerHTML。