如何使用ajax文件上传控件单击上传按钮后回页。

问题描述

<div class="col-lg-12 btn btn-lg red-background">
        <ajaxToolkit:AjaxFileUpload ID="ajaxfuImage"  runat="server"      MaximumNumberOfFiles="10" />
</div>
<asp:DataList ID="dlistImages" runat="server" RepeatColumns="6"   RepeatDirection="Horizontal" RepeatLayout="Flow"

OnItemDataBound="dlistImages_ItemDataBound" DataKeyField="ImageId">
     <ItemTemplate>
         <div id="thumbnail" class="col-sm-2 spacer-top">
                <asp:CheckBox ID="cbxDelete" runat="server" CssClass="checkbox" Value='<%#Eval("ImageId") %>' />
        <asp:Image ID="imgDisplayImages" runat="server" CssClass="img-responsive thumbnail"/>
        </div>
    </ItemTemplate>
</asp:DataList>

我的尝试：



我想要点击Ajax文件上传控件上传按钮后，数据列表自动刷新并获取最新上传的图像。

What I have tried:

I want After the click on Upload button of Ajax File Upload Control the Data list Auto Refresh and get latest uploaded Images.

推荐答案

<input type="button" value="Get Current Time" onclick="ReloadGrid()" />
<form id="form1" runat="server">
	<asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>
	<asp:updatepanel id="UpdatePanel1" runat="server">
		<contenttemplate>
			<asp:gridview id="GridView1" runat="server"></asp:gridview>
			<asp:button id="btnHidddenSubmit" runat="server" onclick="ReloadGrid" style="display: none" />
		</contenttemplate>
	</asp:updatepanel>
</form>

Step2 ：添加以下javascript代码重新加载网格（在您的情况下，您需要在AJAX上传控制按钮内写入）：

Step2: Add following javascript code to reload grid(in your case you need to write inside AJAX upload control button):

<script type="text/javascript">
	function ReloadGrid() {
		document.getElementById("<%=btnHidddenSubmit.ClientID %>").click();
	}
</script>

对于您的方案，您需要使用 OnClientUploadComplete ：



< ajaxToolkit：AjaxFileUpload ID =ajaxfuImagerunat =serverMaximumNumberOfFiles =10 OnClientUploadComplete =ReloadGrid/>



Step3 ：添加以下代码重新加载网格：

For your scenario you need to use OnClientUploadComplete:

<ajaxToolkit:AjaxFileUpload ID="ajaxfuImage" runat="server" MaximumNumberOfFiles="10" OnClientUploadComplete="ReloadGrid"/>

Step3: Add following code to reload grid:

protected void ReloadGrid(object sender, EventArgs e)
{
     // Reload your grid
	List<string> nameList = new List<string>() { "Manas", "Milu" };
	GridView1.DataSource = nameList;
	GridView1.DataBind();
}
</string></string>

注意：如果您通过AJAX将数据加载到网格中，则无需执行上述步骤。只需发送AJAX请求重新加载网格（重新使用代码）。

Note: If you are loading data to your grid through AJAX then there is no need to implement above steps. Simply send AJAX request to reload grid(re-use the code).

这篇关于如何使用ajax文件上传控件单击上传按钮后回页。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！