Upload de fichier

**Pelote2012** · 15/03/2013, 16h01

Pour uploader un fichier j'utilise la bibliothèque flajaxian

Toujours dans la suite de mes posts ...
J'ai une liste de grossites
Quand je sélectionne un grossiste, il y a la création de mon tableau avec différente infos (ça marche bien).
Maintenant lors de l'ajout, je souhaiterais mettre une image mais ça bug

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 $(function () {
            //Liste des grossistes
            $.ajax({
                type: "POST",
                url: "Edit_couleur.aspx/GetGrossistes",
                data: '{"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#lstGrossistes').append($('<option>', { value: "-1", text: "Sélectionnez un grossiste" }));
                    if (msg.d != null) {
                        $.each(msg.d, function (i, item) {
                            $('#lstGrossistes').append($('<option>', { value: item.IdGros, text: item.Libelle }));
                        });
                    }
                },
                error: function () {
                    alert('oups');
                }
            });
 
            //Select change sur liste grossiste
            $('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                            $('.error').hide();
                        }
                    });
                }
            });
 
            //delagate bonton add car n'existe pas au load
            $(document).on("click", "#Add", function () {
 
                $('.error').hide();
 
                var CtrlLib = $('#txtCouleur');
                var Lib = CtrlLib.val();
                if (Lib == "") {
                    $("#Lib_error").show();
                    CtrlLib.focus();
                    return false;
                }
 
                var CtrlImgName = $('#LogoName');
                var ImgName = CtrlImgName.val();
                if (ImgName == "") {
                    $("#Img_error").show();
                    return false;
                }
 
                var myData = {};
                myData.IdGros = Gros;
                myData.Code = $('#txtCode').val();
                myData.Libelle = Lib;
                myData.ImgName = ImgName;
                myData.PageEnCours = document.location.href;
 
                AddCouleur(myData);
 
                return false;
            });
 
 
        });

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
function BuildTable(msg) {
            var table = '<table><thead><tr class="Entete"><th>Libellé</th><th>Code</th><th colspan="2"></th></thead><tbody>';
 
            for (var post in msg.d) {
                var row = '<tr id=' + msg[post].IdCouleur + '>';
 
                row += '<td>' + msg[post].Libelle + '</td>';
                row += '<td>' + msg[post].IdCouleurGros + '</td>';
                row += '<td>' + '</td>';
                row += '<td><img src="/Images/suppr.png" alt="Supprimer" id="Delete"></td>';
 
                row += '</tr>';
 
                table += row;
            }
 
            //Pied pour ajout
            table += '<tr class="Entete2"><td><input type="text" id="txtCouleur" /><br /><label class="error" for="txtCouleur" id="Lib_error">Champs Libellé obligatoire.</label></td>'
            table += '<td><input type="text" id="txtCode" /><br /></td>'
            table += '<td><br /><input type="hidden" id="LogoName" /><div id="MyDiv"></div>'
            table += '<fjx:FileUploader ID="uplFichier" runat="server" UseInsideUpdatePanel="true" SuppressQueryStringParametersOnUploadUrl="False" CssUrl="~/CSS/FileUploader.css" JsFunc_FileStateChanged="FileStateChanged" MaxNumberFiles="1" MaxFileNumberReachedMessage="1 fichier maximum par upload" RequestAsPostBack="True" AllowedFileTypes="Images (Jpeg, Gig, Png):*.jpg;*.jpeg;*.png;*.gif" TransparentBackground="true" IsDebug="false" OnFileReceived="uplFichier_FileReceived"></fjx:FileUploader>'
            table += '<br /><label class="error" id="Img_error">Champs Image obligatoire.</label></td>'
            table += '<td><img src="/Images/add.png" alt="Ajouter" id="Add" /></td></tr>'
 
            table += '</tbody></table>';
 
            $('#divcouleur').html(table);
        };

côté code behind

Code :

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

1
2
3
4
5
6
7
8
9
10
11
Protected Sub uplFichier_FileReceived(ByVal sender As Object, ByVal e As com.flajaxian.FileReceivedEventArgs)
        Try
            'Dim evt As  com.flajaxian.FileReceivedEventArgs = CType(e,com.flajaxian.FileReceivedEventArgs)
            Dim CheminPhy As String = Server.MapPath("~/Images/Temp/")
            If Not My.Computer.FileSystem.DirectoryExists(CheminPhy) Then My.Computer.FileSystem.CreateDirectory(CheminPhy)
            e.File.SaveAs(CheminPhy & "\" & e.File.FileName)
 
        Catch ex As Exception
            HelperJournal.WriteException(ex, "Erreur dans uplFichier_FileReceived", Diagnostics.TraceEventType.Critical)
        End Try
    End Sub

Je me logue, puis quand je vais sur ma page, une exception est tout de suite levée, aucun code ne s'exécute.

Le contrôle 'ctl00_head_uplFichier' de type 'FileUploader' doit être placé dans une balise form avec runat=server.
Description : Une exception non gérée s'est produite au moment de l'exécution de la requête Web actuelle. Contrôlez la trace de la pile pour plus d'informations sur l'erreur et son origine dans le code.

Détails de l'exception: System.Web.HttpException: Le contrôle 'ctl00_head_uplFichier' de type 'FileUploader' doit être placé dans une balise form avec runat=server.

Erreur source:

Une exception non gérée s'est produite lors de l'exécution de la requête Web actuelle. Les informations relatives à l'origine et l'emplacement de l'exception peuvent être identifiées en utilisant la trace de la pile d'exception ci-dessous.

Trace de la pile:

[HttpException (0x80004005): Le contrôle 'ctl00_head_uplFichier' de type 'FileUploader' doit être placé dans une balise form avec runat=server.]
System.Web.UI.Page.VerifyRenderingInServerForm(Control control) +9049264
com.flajaxian.FileUploader.Render(HtmlTextWriter writer) +53
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +208
System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
System.Web.UI.Control.Render(HtmlTextWriter writer) +10
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +208
System.Web.UI.HtmlControls.HtmlHead.RenderChildren(HtmlTextWriter writer) +21
System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +31
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +208
System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
System.Web.UI.Control.Render(HtmlTextWriter writer) +10
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +208
System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
System.Web.UI.Page.Render(HtmlTextWriter writer) +29
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3060

Soit que le flash à la volée c'est nul et il vaut mieux fileuploader les fichier différemment soit que j'ai aussi besoin d'aide

**FirePrawn** · 15/03/2013, 16h06

Hello,

J'me permets d'intervenir alors que j'suis nul en JS

Mais là ton exception est très claire : un FileUploader doit être placé dans un formulaire en runat="server".

**Pelote2012** · 15/03/2013, 16h12

Code :

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

 table += '<fjx:FileUploader ID="uplFichier" runat="server" UseInsideUpdatePanel="true" SuppressQueryStringParametersOnUploadUrl="False" CssUrl="~/CSS/FileUploader.css" JsFunc_FileStateChanged="FileStateChanged" MaxNumberFiles="1" MaxFileNumberReachedMessage="1 fichier maximum par upload" RequestAsPostBack="True" AllowedFileTypes="Images (Jpeg, Gig, Png):*.jpg;*.jpeg;*.png;*.gif" TransparentBackground="true" IsDebug="false" OnFileReceived="uplFichier_FileReceived"></fjx:FileUploader>'

ben ouais, j'ai mis runat server ...
Mais la question que je me pose , est-ce qu'on peut mettre à la volée des controle server avec jquery?

**FirePrawn** · 15/03/2013, 16h34

Non c'est pas ça que te dit l'exception...

Elle dit que ce code :

Code asp.net :

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

<fjx:FileUploader ID="uplFichier" runat="server" UseInsideUpdatePanel="true" SuppressQueryStringParametersOnUploadUrl="False" CssUrl="~/CSS/FileUploader.css" JsFunc_FileStateChanged="FileStateChanged" MaxNumberFiles="1" MaxFileNumberReachedMessage="1 fichier maximum par upload" RequestAsPostBack="True" AllowedFileTypes="Images (Jpeg, Gig, Png):*.jpg;*.jpeg;*.png;*.gif" TransparentBackground="true" IsDebug="false" OnFileReceived="uplFichier_FileReceived"></fjx:FileUploader>

Doit être place à l'intérieur de :

Code asp.net :

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

<form runat="server"></form>

**Bovino** · 15/03/2013, 21h33

Code :

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

table += '<fjx:FileUploader ...></fjx:FileUploader>'

Non mais tu crois quoi ? Que jQuery est capable de compiler ton code serveur ?

Je crois qu'il serait utile pour toi de comprendre (je n'ose pas dire enfin) la différence entre le serveur et le client et ce que ça implique au niveau du code...

**Pelote2012** · 16/03/2013, 13h11

Merci FirePrawn, mais le pb est plutot du coté code behind.

J'ai mis en commentaire ma fonction, et là le code s'exécute, mais il me sort une erreur disant que la fonction n'existe pas.
En regardant les traces de l'erreur, j'ai vu qu'il y a une vérification. Donc si je crée à la volée... Mon composant n'existe pas encore au moment de cette vérif.

Bovino ... je ne suis pas expert javascript, jquery ... j'essaie de comprendre comment ça fonctionne. Je suis déjà bien content d'avoir réussi à faire remplir ma page comme je voulais, alors tu pense bien que le fileupload ...
(déjà je sais que ça ne peut le faire nativement) je sais ce qu'est le côté client et le côté serveur, maintenant les histoires de compilation

je n'ai jamais eu à m'en soucier jusque là. Alors je fais des erreurs, je m'exprime mal ... mais je n'abandonne pas.

Maintenant, si quelqu'un à un exemple qui fonctionne de FileUpload avec jquery/asp.net , je suis preneur

**Pelote2012** · 18/03/2013, 10h41

Bon je pense avoir trouvé un truc interressant

télécharger le fichier jquery.ajax_upload.0.6.js

Puis si vous êtes sur une version de jquery récente, remplaçait

Code :

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

jQuery.browser.msie

par

Code :

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

/MSIE/.test(navigator.userAgent

créer un 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

Puis dans votre page aspx:
N'oublié pas les références aux scripts jquery et jquery.ajax_upload.0.6.js
Puis dans le Head

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
  <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>

et dans le body

Code :

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

1
2
3
4
5
6
7
8
9
10
<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>

ça marche nickel

Je pense qu'avec ça je pourrais faire du upload à la volée.

**Pelote2012** · 19/03/2013, 12h31

c'est good

Faut juste penser mettre la partie

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
 var button = $('#btnUpLoad'), 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();
 
                    $('#AfficheUpload').text('Fichier:' + file);
                    $('#LogoName').text(file);
                    $('#LeLogo').attr("src", '<%= PATH_IMG_TMP %>' + file);
                    $('#LeLogo').show();
                }
            });

dans le succes du change de ma liste de grossiste
J'ai fait une fonction BuildFonctionTable contenant le code ci-dessus
Puis

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
 //Select change sur liste grossiste
            $('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                            BuildFonctionTable();
                        }
                    });
                }
            });

Upload de fichier

jQuery

Discussions similaires

Partager

Partager