Question

JS的新手，所以希望这是一个简单的解决方案。我试图从＆＃34;文件上传＆＃34;更改innerHTML。到他们选择的文件的名称。这有效，但是当我点击＆＃34;上传＆＃34;按钮，它收到此错误：

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>并设置其内部HTML。

改变输入类型的innerHTML =＆＃34; file＆＃34;导致Uncaught Type错误？

1 个答案: