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