上传前选定文件的预览列表（ASP.Net）

按钮的FileUpload

<asp:fileupload runat="server" id="fileUpload" ClientIDMode="Static" multiple="multiple" onchange="javascript:tblUpload()" />

表预览所选文件

<table id="tblUpload" border="1"> 
    <tr> 
    </tr> 
</table>

的Javascript

$(document).ready(function() { 
    tblUpload = function() { 
     var input = document.getElementById('fileUpload'); 
     var output = document.getElementById('tblUpload'); 

     output.innerHTML = '<tr>'; 
     output.innerHTML += '<th class="thStyle" style="width: 400px;"><b>File Name</b></th><th class="thStyle" style="width: 255px;"><b>Preview Image</b></th>'; 
     for (var i = 0; i < input.files.length; ++i) { 
      output.innerHTML += '<td style="padding: 10px; width: 300px;">' + input.files.item(i).name + '</td>' + 
       '<td style="padding: 10px; width: 150px; color: #0d47a1"><a href="#">Show</a>&emsp; &emsp; &emsp;<a href="#">Delete</a></td>'; 
     } 
     output.innerHTML += '</tr>'; 
    } 
});

我想要做的是，只有单击按钮预览时选择的文件预览列表。我正在使用下面的代码按钮预览。

按钮预览

<asp:Button runat="server" ID="btnPreview" Text="Upload File" />

我指的是这个网站http://www.encodedna.com/javascript/get-the-name-size-count-of-multiple-files-using-javascript.htm，并试图把onclick="tblUpload()"在btnPreview，但它不能正常工作。任何建议？谢谢。

来源

2016-11-03 Emerald

如果您只想单击按钮时预览，则不会希望<input>中有onchange="javascript:tblUpload()"。

这jsbin工作对我来说：http://jsbin.com/xaqajogudu/edit?html,js,output

我假设你正在使用

<asp:Button runat="server" ID="btnPreview" Text="Upload File" 
    OnClientClick="tblUpload(); return false" />

，而不是OnClick属性，它仅在回发使用

来源

2016-11-03 07:00:55

我想这'的'它会抛出一个错误，即：** FileDetails不是main_aspx的成员** – Emerald

是的，您会得到那个错误。我上面使用了'OnClientClick'，而不是'OnClick'。 'OnClick'用于在代码后面执行代码而不是你的javascript。 –

我希望我写的这种方式听起来不失礼。我不是这个意思:) –

上传前选定文件的预览列表（ASP.Net）

回答

相关问题