Question

下面是我用来显示所选文件列表的编码。

按钮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 ，但它无效。有什么建议吗？谢谢。

Answer 1

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

这个jsbin适合我：http://jsbin.com/xaqajogudu/edit?html,js,output

我假设您正在使用

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

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

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

1 个答案: