Uplaod d'un fichier

**van-bom** · 05/11/2008, 13h34

Bonjour à tous.
est-il possible de faire des téléchargements cotés serveur (Upload) en AJAX en utilisant prototype ?
merci.

**Bovino** · 05/11/2008, 14h17

Oui, que ce soit avec ou sans Prototype. Une requête Ajax est lancée en javascript mais ce qui se passe coté serveur n'a plus rien à voir avec javascript. Tout ce que tu fais habituellement en langage serveur est donc faisable avec Ajax.

**van-bom** · 05/11/2008, 21h08

j'ai essayer mais le $_FILE['file'] ne me retour en rien !

**Bovino** · 05/11/2008, 21h33

Là, j'ai peur de ne pas trop comprendre ce que tu cherches à faire... Si tu souhaites récupérer ton fichier sur le retour Ajax, effectivement, ça va poser problème car la réponse est soit du texte soit du xml. En revanche, lancer l'upload du fichier via php (par exemple) sur un script appelé via Ajax est me semble-t-il possible.
Ceci dit, sans code et sans plus d'explications, c'est un peu difficile de répondre !

**Kerod** · 05/11/2008, 21h52

Une solution serait l'utilisation d'une iframe cachée dans laquelle tu soumettrais le formulaire

**Identifiant** · 05/11/2008, 22h32

Default.aspx

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<html>
<head>
<title>ASP.NET AJAX EXTENSIONS - FILE UPLOAD WORKAROUND</title>
 
<script>
function iFrame_OnUploadComplete() { 
	document.form1.btnUploaded.click();	
}
</script>
</head>
<body>
<form id="form1" target="_self" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
 
	<!-- this label is just to make sure that the page is working without any postback -->
	<asp:Label ID="lblPageLoadTime" runat="server" Text="Label" />
 
	<!-- an iframe that loads the same page, but just displays file upload panel (pnlFileUpload) -->
	<asp:Panel ID="pnlIFrame" runat="server">
		<iframe src="default.aspx?MODE=IFRAME" style="width:300px;height:100px;border-width:0;" frameborder="0">
			Your browser does not support iframes
		</iframe>
	</asp:Panel>
 
	<asp:UpdatePanel ID="pnlAjax" runat="server">
 
		<ContentTemplate>	
 
			<!-- a button that raises its click event after file upload in iframe is complete -->
			<asp:Button ID="btnUploaded" style="display:none;" UseSubmitBehavior="false" runat="server" OnClick="btnUploaded_Click" />
 
			<!-- a listbox to display all the list of files uploaded in the session -->
			List of files uploaded:<br />			
			<asp:ListBox ID="lstFilesList" style="width:300px;height:150px;" runat="server" />
 
 
		</ContentTemplate>
 
		<Triggers>
			<asp:AsyncPostBackTrigger ControlID="btnUploaded" EventName="Click" />
		</Triggers>
 
	</asp:UpdatePanel>
 
 
	<!-- a panel for file upload section -->
	<asp:Panel ID="pnlFileUpload" Visible="false" runat="server">
 
		<asp:FileUpload ID="fileTestUpload" runat="server" />
 
		<br /><asp:Button ID="btnUpload" Text="Upload" runat="server" />
 
	</asp:Panel>
 
 
</form>
 
 
</body>
</html>

Default.aspx.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
Partial Class _Default
    Inherits System.Web.UI.Page
 
	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
		lblPageLoadTime.Text = "This page was loaded at: " & Now.ToString
		GenerateUploadForm()
	End Sub
 
	Protected Sub GenerateUploadForm()
		' if querystring parameter "MODE" is set to "IFRAME" 
		'then just display file upload panel (pnlFileUpload) and hide everything else
		Dim mode As String = Request.QueryString("MODE")
		If Not mode = "IFRAME" Then Return
		pnlAjax.Visible = False
		pnlIFrame.Visible = False
		lblPageLoadTime.Visible = False
		pnlFileUpload.Visible = True
		If Not IsPostBack Then Session("UploadedDocumentsList") = Nothing
	End Sub
 
	Protected Sub btnUploaded_Click(ByVal sender As Object, ByVal e As System.EventArgs)
		If Session("UploadedDocumentsList") Is Nothing Then Return
		' display list of files uploaded in the listbox
		Dim filesArray As ArrayList = CType(Session("UploadedDocumentsList"), ArrayList)
		lstFilesList.DataSource = filesArray
		lstFilesList.DataBind()
	End Sub
 
	Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
        ' when upload button is clicked, save the filename to the session
 
        If fileTestUpload.HasFile Then
            Try
                fileTestUpload.SaveAs(Server.MapPath(".\") & _
                                      fileTestUpload.FileName)
 
            Catch ex As Exception
                ex.Message.ToString()
            End Try
 
        End If
 
        If Not fileTestUpload.HasFile Then Return
 
        Dim filesArray As ArrayList
        ' create new arrayList for storing filenames if it does not already exist
        If Session("UploadedDocumentsList") Is Nothing Then
            filesArray = New ArrayList
        Else
            filesArray = CType(Session("UploadedDocumentsList"), ArrayList)
        End If
        filesArray.Add(fileTestUpload.FileName)
        Session("UploadedDocumentsList") = filesArray
        ' the following code triggers upload completion event in client side
        ClientScript.RegisterStartupScript(Page.GetType, "Upload Completed", "window.parent.iFrame_OnUploadComplete();", True)
    End Sub
 
End Class

Si tu veux le code en C#, je vous le donnerez demain.

**van-bom** · 06/11/2008, 01h26

bonjour,
en fait ce que je voulais faire est que j'ai un formulaire transmis en ajax , et je veux permettre l'upload d'une image sur un boutton indépendant (à la manière de gmail) , j'utilise PHP et prototypeJS.
(merci Identifiant pour le code )

**Kerod** · 06/11/2008, 01h38

C'est bien ce que je disais (mais pas besoin de prototype pour le faire).

Tu as ton formulaire tel quel
Tu rajoutes une iframe avec un display:none
Tu définis le target de ton formulaire pour qu'il s'execute dans l'iframe
Enfin du côté serveur tu testes pour voir si le transfert a bien eu lieu et si c'est le cas tu renvoies l'url sur le serveur puis tu modifies le src de ton image. (tout ça en utilisant AJAX)

Désolé j'ai pas de code sous la main (ou plutôt je ne l'ai plus)

**van-bom** · 07/11/2008, 23h03

merci Kerod, la méthode a bien fonctionné

Uplaod d'un fichier [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager