码迷,mamicode.com
首页 > 其他好文 > 详细

fileupload控件在ajax中无法使用

时间:2014-06-06 08:14:26      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

google得到的方法:

1。http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

There is a better way of doing it with Ajax Control Toolkit version 3.0.30930 which works with .NET 3.5 SP1 and Visual Studio 2008 SP1.  Please read this post for a step by step instruction

One of the common queries I get across my sessions is that, the File Upload control doesnt work inside an Update panel.  All of us would like to implement a Gmail File Upload kind of interface and when you try to implement a similar thing using UpdatePanel (which works like a charm for other activities), it simply doesn‘t work.

The behaviour is expected.  The File Upload Control doesnt work inside an Update Panel due to security reasons and restrictions a browser implies.  They dont allow Javascript files to directly access the files in an user‘s sytem and dont allow to modify or access the details of a file when working with the File Upload Control.

There are a couple of ways to solve this issue, one using Update Panel and Post Back Triggers and the other using Iframes.

1. Use Update Panel, File Upload Control and use a PostBackTrigger Control to force a postback only for the File Upload Control

This approach works well without much tweaking except for that, there would be a postback only for the File Upload Control.  While the rest of the stuff happens asynchronously, using the UpdatePanel, when the user presses the "Upload" Button, the page will be refreshed.  Let us examine how we can accomplish this.  Place the following code within the <form> </form> tags in your ASP.NET Page.  

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

 <br />

<asp:Button ID="Button1" runat="server" Height="20px" onclick="Button1_Click"Text="Submit" Width="128px" />

<br />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<br />

<asp:FileUpload ID="FileUpload1" runat="server" />

<br />

<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click"Text="Upload" Width="128px" />

<br />

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<br />

</ContentTemplate>

<Triggers>

<asp:PostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

In the Code behind, add the following lines of code:-

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = TextBox1.Text;

}

protected void Button2_Click(object sender, EventArgs e)

{

FileUpload1.PostedFile.SaveAs(@"C:\test\"+System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName));

Label2.Text = FileUpload1.PostedFile.FileName;

}

If you run the above sample, you would notice that upon entering something in the TextBox and clicking "Submit" (Button1) the Label above the File Upload Content, shows the Text you typed, without a page refresh.

However, when you select a file and click on the "Upload" (Button2) Button, you would notice that a postback happens and the file gets posted to the "C:\Test\" folder and also the full path is specified in the Label 2.

In the above code, I have not taken any steps regarding validation, checking if file exists etc., since it just shows how you could accomplish File Upload within Update panel.  In normal cases, you would write better code to accomplish a file upload feature.

2. Use Iframes and accomplish a truly Gmail Like File Upload Interface.

I thought of writing a post on this, but did a quick research and found that there are a few solutions posted by our MVPs / Community Folks and just thought of providing a link to the same.

http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx

Note that this post doesnt claim any warranty / support for the above articles, though.

Cheers !!!

按照上面的第一种方法来做果然成立,下面是相关代码:

前台:

bubuko.com,布布扣
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>    </form>
</body> </html>
bubuko.com,布布扣

 

 

 

fileupload控件在ajax中无法使用,布布扣,bubuko.com

fileupload控件在ajax中无法使用

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/drinkoJam/p/3767480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!