Comment upload un fichier en ASP.NET AJAX JQuery
Je me permet de créer ce sujet en double dans ce forum.
J'ai posté le même sujet dans le forum ASP.NET AJAX, mais je ne sais pas si ce forum ne parle que de sujets traitant du framework AJAX ASP.NET uniquement.
Dans le doute je poste mon sujet ici également.
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:
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:
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" />  
</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:
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:
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:
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.
