上传前预览选定文件列表（ASP.Net）(Preview list of selected file before upload (ASP.Net))

上传前预览选定文件列表（ASP.Net）(Preview list of selected file before upload (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但它不起作用。 任何建议？ 谢谢。

Below are coding that i used to display list of files selected.

Button FileUpload

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

Table for preview selected file

<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>'; } });

What I wanted to do is, only preview list of files selected when button preview is clicked. I am using below code for button preview.

Button Preview

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

I refer to this site http://www.encodedna.com/javascript/get-the-name-size-count-of-multiple-files-using-javascript.htm and tried to put onclick="tblUpload()" at btnPreview but it isn't functioning. Any suggestion? Thank you.

最满意答案

如果您只想单击按钮时预览，则不会希望在<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" />

而不是仅在Postback中使用的OnClick属性

If you want to only preview when button is clicked you won't want to have onchange="javascript:tblUpload()" in the <input>.

This jsbin works for me: http://jsbin.com/xaqajogudu/edit?html,js,output

I assume you are using

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

and not the OnClick attribute which is only used in Postback