Emerald Emerald - 1 year ago 114
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">


$(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
at btnPreview but it isn't functioning. Any suggestion? Thank you.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download