Emerald Emerald - 1 month ago 8
ASP.NET (C#) Question

Preview list of selected file before upload (ASP.Net)

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.

Answer

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