尝试从输入中获取文件会在IE8中返回Object Error

Question

我已经搜索了具体的错误，但无法提供大量有用的信息。返回错误的相关代码如下。

JS：

var files = document.getElementById("file").files;
for (var i = 0; i < files.length; i++)
    document.getElementById("filename").value = files[i].name;
    document.getElementById("filename").setAttribute('value', files[i].name);
    document.getElementById("filename") = document.getElementById("filename");

HTML：

    <form action="../interface/upload.php" method="post" enctype="multipart/form-data">
      <span class="btn btn-default btn-file btn-lg btn-block">
          <i class="glyphicon glyphicon-file fileinput-exists"></i> Browse File <input type="file" id="file" onchange="getfile()" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <input id="filename" type="text" class="btn" value="No file choosen" disabled="true">
      </span>
      <input type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
    </form>

目标是在＆＃34;文件名＆＃34;中显示所选文件的名称。输入

由于某些原因，这会在IE8中返回以下错误

ERROR / IE8：

Message: 'length' is Null or not an Object
Line: 4
Character: 18
Code: 0
URI: http://localhost/assets/js/filechooser.js

修复

function getfile(evt)
{
  var filename = evt.value;
  filename = filename.split('\\').pop();
  document.getElementById("filename").value = filename;
}

Answer 1

IE9及更早版本不支持File API。因此，根本没有files属性，并且无法选择多个文件。您只能通过文件输入上的value属性访问文件名。

Answer 2

当document.getElementById("file").files只返回一个元素时，file没有length。保护这种特殊情况，也适用于所有不返回的情况。

修改

因为您澄清了您总是有一个file元素，以下内容可能对您有用：

<form action="../interface/upload.php" method="post" enctype="multipart/form-data">
      <span class="btn btn-default btn-file btn-lg btn-block">
          <i class="glyphicon glyphicon-file fileinput-exists"></i> Browse File <input type="file" id="file" onchange="getfile(this)" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <input id="filename" type="text" class="btn" value="No file choosen" disabled="true">
      </span>
      <input type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</form>


<script language="javascript">
function getfile(evt)
{
  alert(evt.value);
  document.getElementById("filename").value = evt.value;
}
</script>

请注意我对您的HTML进行的onchange="getfile(this)"修改。