Question

我通过互联网搜索在更新面板中使用上传文件。我想点击文件上传时避免页面刷新。所以我把我的代码放在更新面板中，带有触发器但仍然令人耳目一新......

代码：

<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
                <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="true">
                    <Triggers>
                        <asp:PostBackTrigger ControlID="imageUploadAction" />
                    </Triggers>
                    <ContentTemplate>
                        <div class="fileUpload btn btn-primary btn-block btn-lg">
                            <span>آپلود</span>
                            <asp:FileUpload CssClass="inputfile" runat="server" ID="imageUpload" />
                        </div>
                        <br />
                        <div class="alert alert-info" runat="server" id="imageAlert"></div>
                        <div style="border-bottom: 1px solid #ddd;"></div>
                        <br />
                        <asp:Button runat="server" ID="imageUploadAction" CssClass="btn btn-block btn-lg btn-success" Text="ارسال" OnClick="imageUploadAction_Click" />
                    </ContentTemplate>
                </asp:UpdatePanel>

代码背后：

protected void imageUploadAction_Click(object sender, EventArgs e)
{
    Debug.WriteLine("Uploading" + " " + imageUpload.HasFile);
    Boolean fileOK = false;
    String path = Server.MapPath("~/Assets/image/posts/");
    if (imageUpload.HasFile)
    {
        String fileExtension = System.IO.Path.GetExtension(imageUpload.FileName).ToLower();
        String[] allowedExtensions = { ".jpg", ".png" };
        for (int i = 0; i < allowedExtensions.Length; i++)
            if (fileExtension == allowedExtensions[i])
                fileOK = true;
    }

    if (fileOK)
    {
        try
        {
            int last = getLastImage() + 1;
            string link = path + last + ".jpg";
            imageUpload.PostedFile.SaveAs(link);
            db.insertPhoto(link);
            imageAlert.InnerText = "فایل آپلود شده است ، کد عکس : " + last;
        }
        catch (Exception ex)
        {
            ExceptionUtility.LogExceptionNotFailure(ex);
            Debug.WriteLine(ex.ToString());
            imageAlert.InnerText = "فایل نمیتواند آپلود شود.";
        }
    }
    else
    {
        imageAlert.InnerText = "فایل مجاز نیست";
    }
}

Answer 1

您将imageUploadAction按钮设置为PostBackTrigger（因此不是异步）会导致页面完全重新加载。

请注意，无法使用UpdatePanel使用常规上传器。如果您真的想要异步文件上传，那么您必须在客户端和服务器端实现相当多的代码。

在这里看看FlowJs https://github.com/flowjs/flow.js 这里有一个演示 http://flowjs.github.io/ng-flow/

希望有所帮助

更新面板中的文件上传仍在刷新

1 个答案: