如何在不提交的情况下使用文件上传控件在客户端获取选定的文件名

Question

到目前为止我找不到现有的答案，但这是我的目标：

我想使用 asp.net 文件上传控件（或您可能建议的其他控件）来选择一系列文件。 在不提交表单的情况下，我希望所选文件显示在某种级联列表中。

文件上传控件是否可以做到这一点，或者我必须使用其他控件？ 我已经看到许多涉及提交然后抓取文件名的答案，但我不想为此去服务器。 只是想在选择文件名时获取文件名，所有客户端。

谢谢你的时间！

Answer 1

使用files属性。请参阅下面的代码：

function onInputChange(e) {
    var res = "";
    for (var i = 0; i < $("#customInput").get(0).files.length; i++) {
      res += $("#customInput").get(0).files[i].name + "<br />";
    }
  
    $('#result').html(res);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="customInput" type="file" accept="image/*" multiple onchange="onInputChange(event)" />
<br /><br />
<div style="color:blue" id='result'></div>

Answer 2

试试这个 -

爪哇语

 function showFile() {
  var file = document.getElementById("<%=FileUpload1.ClientID%>");      
  var path = file.value;
  alert(path); 
}

文件上传控制

<asp:FileUpload ID="FileUpload1" runat="server" onchange="showFile()"  />