Comment upload un fichier en ASP.NET AJAX JQuery

**Johann7751** · 14/02/2012, 10h38

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.

**Pelote2012** · 25/04/2013, 15h58

Je ne sais si t'a trouvé la soluce
mais en voilà une

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 Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Master.Master"
    CodeBehind="Upload.aspx.vb" Inherits="Jquery.Upload" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="script/jquery.ajax_upload.0.6.js"></script>
    <script type="text/javascript">
 
$(document).ready(function(){
	var button = $('#button1'), interval;
	$.ajax_upload(button,{
		action: 'FileHandler.ashx',
		name: 'myfile',
		onSubmit : function(file, ext){
			// change button text, when user selects file
			button.text('Uploading');
 
			// If you want to allow uploading only 1 file at time,
			// you can disable upload button
			this.disable();
 
			// Uploding -> Uploading. -> Uploading...
			interval = window.setInterval(function(){
				var text = button.text();
				if (button.text().length < 13){
					button.text(button.text() + '.');
				} else {
					button.text('Uploading');
				}
			}, 200);
		},
		onComplete: function(file, response){
			button.text('Upload');
 
			// Although plugins emulates hover effect automatically,
			// it doens't work when button is disabled
			button.removeClass('hover');
 
			window.clearInterval(interval);
 
			// enable upload button
			this.enable();
 
			// add file to the list
			$('<li></li>').appendTo('#example1 .files').text(file);
		}
	});
 
});</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ul>
	<li id="example1" class="example">
		<p>You can style button as you want</p>
		<div class="wrapper">
			<div id="button1" class="button">Upload</div>
		</div>
		<p>Uploaded files:</p>
		<ol class="files"></ol>
	</li>
</ul>
 
</asp:Content>

FileHandler.ashx

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
Imports System.Web
Imports System.Web.Services
Imports System.IO
 
Public Class FileHandler
    Implements System.Web.IHttpHandler
 
    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
 
        Dim strResponse As String = "error"
        Try
            Dim strFileName As String = Path.GetFileName(context.Request.Files.Item(0).FileName)
            Dim strExtension As String = Path.GetExtension(context.Request.Files.Item(0).FileName).ToLower()
            Dim strSaveLocation As String = context.Server.MapPath("Upload") + "\\" + strFileName
            context.Request.Files.Item(0).SaveAs(strSaveLocation)
            strResponse = "success"
        Catch ex As Exception
 
        End Try
 
        context.Response.ContentType = "text/plain"
        context.Response.Write(strResponse)
 
    End Sub
 
    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
 
End Class

Comment upload un fichier en ASP.NET AJAX JQuery

ASP.NET Ajax

Discussions similaires

Partager

Partager