J'ai post� ce sujet �galement dans le forum ASP.NET, ne sachant pas si ce forum traitait uniquement les sujets concernant le framework ASP.NET AJAX (AJaxControlToolKit)



Bonjour,

Je souhaite r�ussir � t�l�charger (upload) un fichier sur un serveur en utilisant ASP.NET / AJAX / JQuery.
Un 1er constat d'abord, il s'av�re qu'il n'est pas possible de le faire "nativement".
Par contre il semble qu'il est possible de le faire avec des plugins.

http://stackoverflow.com/questions/3...nchronous-ajax

D'apr�s ce que j'ai compris, ces plugin permettent de recr�er le comportement n�cessaire pour uploader un fichier de mani�re normale. (avec un Iframe)

Liens vers ces plugin :
http://blueimp.github.com/jQuery-File-Upload/
http://www.uploadify.com/
http://valums.com/ajax-upload/
http://www.codeproject.com/Articles/...T-using-jQuery

Le truc c'est que je comprends pas comment faire fonctionner ces plugins, malgr� les tutoriels.
Je comprends pas quels contr�les HTML je dois mettre dans ma page.

un input type="file" + un input type=button ?
autre chose ?
C'est pas clair, je trouve que les tutoriels ne sont pas si clairs que �a.




Voici mon environnement actuel et le code que j'avais fait (avant de savoir que l'upload en ajax n�cessitait un plugin) :

J'ai une page .aspx.
Cette page .aspx a une page ma�tre. C'est dans cette page ma�tre que je met la r�f�rence vers la biblioth�que JQuery entre autre :
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
       <script type="text/javascript" src='<%#this.ResolveClientUrl("~/script/jquery-1.6.min.js"+"?v="+BusinessLayer.MyConfiguration.versionRessources)%>'></script>
        <script type="text/javascript" src='<%#this.ResolveClientUrl("~/script/jquery-ui-1.8.11.min.js"+"?v="+BusinessLayer.MyConfiguration.versionRessources)%>'></script>
Dans ma page .aspx, j'ai tout simplement un composant input type="file" et un bouton input type="button" pour uploader le fichier.
J'ai une m�thode JQuery associ�e au click sur le bouton.
Cette m�thode appelle une m�thode dans un webservice.
C'est cette m�thode dans le webservice qui va uploader le fichier.

Voici ma page .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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestUploadAjax.aspx.cs" Inherits="TechnicalParts_TestUploadAjax" MasterPageFile="~/Main.Master" %>
<%@ Import Namespace="BusinessLayer" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="Left" Runat="Server">
 
	<div>
		<div>
			<input type="file" id="FileUploader" />
		</div>
		<div >
			<input type="button" id="btnOKUpload" value="Upload le fichier sur le serveur" /> &nbsp
		</div>
	</div>
 
    <script type="text/javascript" language="javascript">
 
        var userId = "<%=Session[MyConfiguration.UserGuid] %>";
        var idLanguage = "<%=Session[MyConfiguration.IdLanguage] %>";
 
        $(document).ready(function () {
 
            // --------------------------------------------------------- Event 'click' button  -----------------------------------------------------------------------
            $("#btnOKUpload").click(function () {
                $("#spanListReferencesNotFound").hide();
                var pathFile = $("#FileUploader").attr("value");
                if (pathFile != undefined && pathFile != "") {
					$.ajax({
						type: "POST",
						url: "MyWebService.asmx/UploadFileOnServer",
						contentType: "application/json; charset=utf-8",
						data: JSON.stringify({ "pathFile": pathFile, "idLanguage": idLanguage, "userId": userId }),
						dataType: "json",
						success: function (response) {
							alert("OK");
						},
						error: function (error) {
							alert('Erreur : \n' + 'Echec upload. \n' + JSON.parse(error.responseText).Message + "\nStack Trace : \n" + JSON.parse(error.responseText).StackTrace);
						}
					});
                }
                else {
                    alert("Chemin de fichier incorrect");
                }
            });
			// -----------------------------------------------------------------------------------------------------------------------------------------------------------
 
        });
 
    </script>
 
</asp:Content>
Et ma m�thode, dans le webservice :
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
[WebMethod]
public void UploadFileOnServer(string pathFile, byte idLanguage, Guid userId)
{
	string nameFile = pathFile.Split('\\').Last();
 
	// Enregistrer le fichier dans le répertoire d'upload
	if (File.Exists(Server.MapPath("~/UploadedFiles/Test/") + nameFile))
	{
		File.Delete(Server.MapPath("~/UploadedFiles/Test/") + nameFile);
	}
	File.Copy(pathFile, Server.MapPath("~/UploadedFiles/Test/") + nameFile);
}
Ceci fonctionne tr�s bien dans mon environnement de d�veloppement avec IIS de Visual Studio (Cassini).
Par contre, lorsque mon application ASP.NET est d�ploy�e dans son environnement de production, sur le serveur de production, �a ne fonctionne plus.
L'upload ne fonctionne pas.



Bien s�r, j'arrive me d�brouiller autrement, en utilisant une m�thode ASP.NET "classique" pour uploader mon fichier (avec le composant server "asp:FileUpload") :


la page 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
<%@ Page Language="C#" MasterPageFile="~/Main.Master"  AutoEventWireup="true" CodeFile="TestUploadAspNet.aspx.cs" Inherits="TechnicalParts_TestUploadAspNet" %>
<%@ Import Namespace="BusinessLayer" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="Left" Runat="Server">
 
     <!-- http://lesite.org/teamitelios/archive/2008/05/16/asp-net-fileupload-et-updatepanel.aspx -->
    <asp:UpdatePanel runat="server" ID="uPanelFileUploader" UpdateMode="Conditional">
        <Triggers>
            <asp:PostBackTrigger ControlID="btnUpload" />
        </Triggers>
        <ContentTemplate>
            <asp:Panel runat="server" ID="panelA" Enabled="true">
				<asp:FileUpload runat="server" ID="fileUploader" />
				<asp:Button runat="server" ID="btnUpload" Text="Upload le fichier sur le serveur" OnClick="btnUpload_Click" />
            </asp:Panel>
       </ContentTemplate>
    </asp:UpdatePanel>
 
</asp:Content>

Et ma page .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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using BusinessLayer;
 
public partial class TechnicalParts_IllustrationsIntegratorAspNet : OscaroPage
{
 
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (fileUploader.HasFile)
        {
			if (File.Exists(Server.MapPath("~/UploadedFiles/Test/") + Path.GetFileName(fileUploader.FileName)))
			{
				File.Delete(Server.MapPath("~/UploadedFiles/Test/") + Path.GetFileName(fileUploader.FileName));
			}
			fileUploader.SaveAs(Server.MapPath("~/UploadedFiles/Test/") + Path.GetFileName(fileName));		
        }
    }
 
}

Cette m�thode fonctionne tout le temps quelque soit l'environnement (d�veloppement et production).
Mais pour moi, j'ai l' inconv�nient suivant :
==> L 'ASP.NET peut entra�ner des Timeout dans le traitement que je vais faire par la suite.
J'arrive � g�rer ce timeout avec un syst�me de Timer et de threads, mais c'est assez fastidieux � mettre en place.


Donc ce que je voudrais, c'est arriver � utiliser un de ces plugin qui me permettrait de faire mon upload de fichier en JQuery.

Merci de votre aide.