javascript - AsyncFileUpload Inside Listview Insert、Edit Itemtemplate 和 EmptyData Template 将不起作用

Question

AsyncFileUpload 在 Listview Insert、Edit Itemtemplate 和 EmptyData Template 中不起作用。

以上是我的客户端函数

function AttachmentUploadSuccessful() {
    debugger;
    var textError = $(".AttachmentError").text();
    if (textError.length > 0) {
        var text = $(".AttachmentError");
        text.innerText = text.textContent = textError;
        sender._onError(textError); // it will raise the OnClientUploadError event
        return;
    } else {

        //alert(" File attachment is uploaded successfully.");
        //CODE TO  REMOVE FILE AND BACKGROUND COLOR OF FILE UPLOADER
        $('.ModelBackgroundforCreateItem').hide();
        $('.PopupPanel').hide();
        var UploadControls = $('#<%= FileUpload.ClientID %> :input');
        UploadControls.each(function () {

            //$(this).val("");
            $(this).css('background-color', '#fff');
        });

        //Updating Update panel by clicking button
        $(".RefreshList").click();
    }
}

 function AttachmentUploadFailed() {

    alert("An error occured while uploading  File Attachment. ");
}

.aspx 文件中的标记

<asp:ListView ID="ListView2" runat="server">
    <EmptyDataTemplate>
    <table class="fileUpload" runat="server" id="FileUploadID">
                <tr>
                    <td>
                        <div style="width: 350px; overflow-x: hidden;">
                            <asp:AsyncFileUpload runat="server" ID="FileUpload" ThrobberID="Throbber" OnClientUploadError="AttachmentUploadFailed"
                                OnClientUploadComplete="AttachmentUploadSuccessful" UploaderStyle="Traditional" UploadingBackColor="" Style="display: inline-block; margin-top: 5px;"
                                OnUploadedComplete="FileUpload_UploadedComplete">
                            </asp:AsyncFileUpload>
                        </div>
                    </td>
                    <td style="width: 30px">
                        <asp:Image ID="Throbber" ImageUrl="~/Image/AttachmentLoading.gif" Style="display: None; width: 20px;" runat="server" />
                        <br />
                    </td>
                </tr>
        </table>
        </EmptyDataTemplate>
</asp:ListView>

正在尝试上传文件 正在调用客户端事件 OnClientUploadError无法理解为什么会出错。在简单页面和更新面板内上传相同的文件工作但在 ListView 内它给客户端错误。通过上面的链接问题没有得到确切的答案，请帮助我。

How to find Ajaxfileupload control inside Listview When in Editmode

AsyncFileUpload within EditItemTemplate of ListView

Answer 1

我可以在您共享的代码中看到两个问题:

1. 那行代码:var UploadControls = $('#<%= FileUpload.ClientID %> :input')
2. 而且你没有 ClientIDMode标记中的属性，所以它是 Inherit

这两个问题同源:你使用的是AsyncFileUploader在 ListView 里面，因此您的页面中将有多个元素带有 FileUpload编号。

因此，首先您必须将函数声明更改为:

function AttachmentUploadSuccessful(sender, e) { // then you can get the sender

然后，获取 input ，您将使用:

var UploadControls = $(sender._inputFile);

最后，要解决第二个问题，您需要更改 ClientIDMode属性(property)AutoID , 所以 AsyncFileUploader将能够正确找到其引用的客户成员。