Ajout de contrôle d'entrée aux pages avec jQuery a un problème avec HttpFileCollection dans ASP.NET

J'essaie d'ajouter des contrôles de téléchargement à la page.Ajout de contrôle d'entrée aux pages avec jQuery a un problème avec HttpFileCollection dans ASP.NET

Cette majoration HTML avec JavaScript fonctionne bien mais il n'y aucune option de supprimer le contrôle ajouté:

1. Exemple A

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Multi File Upload</title> 
</head> 
<body> 
    <form id="form1" runat="server" enctype="multipart/form-data"> 
    <p id="upload-area"> 
    </p> 
    <input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" /> 
    <br /> 
    <br /> 
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
    <p> 
     <asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p> 
    <span id="Span1" runat="server" /> 

    <script type="text/javascript"> 


     function addFileUploadBox() { 
      if (!document.getElementById || !document.createElement) 
       return false; 

      var uploadArea = document.getElementById("upload-area"); 

      if (!uploadArea) 
       return; 

      var newLine = document.createElement("br"); 
      uploadArea.appendChild(newLine); 

      var newUploadBox = document.createElement("input"); 

      // Set up the new input for file uploads 
      newUploadBox.type = "file"; 
      newUploadBox.size = "60"; 

      // The new box needs a name and an ID 
      if (!addFileUploadBox.lastAssignedId) 
       addFileUploadBox.lastAssignedId = 100; 

      newUploadBox.setAttribute("id", "dynamic" + addFileUploadBox.lastAssignedId); 
      newUploadBox.setAttribute("name", "dynamic:" + addFileUploadBox.lastAssignedId); 
      uploadArea.appendChild(newUploadBox); 
      addFileUploadBox.lastAssignedId++; 
     } 
    </script> 

    </form> 
</body> 
</html>

1. Exemple A: code derrière

 Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click 
      Dim uploads As HttpFileCollection 
      uploads = HttpContext.Current.Request.Files 

      Dim sfile As String 


      For i As Integer = 0 To (uploads.Count - 1) 

       If (uploads(i).ContentLength > 0) Then 
        Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName) 

        Try 
         uploads(i).SaveAs("C:\UploadedUserFiles\" + c) 

         sfile += uploads(i).FileName & "<br/>" 


         Span1.InnerHtml = "File Uploaded Sucessfully." 
        Catch Exp As Exception 
         Span1.InnerHtml = "Some Error occured." 
        End Try 

       End If 

      Next i 

      Label1.Text = sfile 


     End Sub

2. Exemple B avec jQuery et option de suppression du contrôle ajouté Cependant, lorsque j'ai changé JavaScript en jQuery, cela ne fonctionne pas. Je peux ajouter et supprimer le contrôle, mais quand je soumets aucun fichier n'est téléchargé. Mark-up avec jQuery:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="add-remove-control.aspx.vb" 
     Inherits="APIU.Web.add_remove_control" %> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 

     <script src="_Assets/scripts/jquery.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(function() { 

       var i = 1; 
       //allow only 3 elements 

       $('#add').click(function() { 
        if (i < 4) { 
         var add_input = '<input type="file" id="' + 'dynamic:' + i + '" name="' + 'dynamic:' + i + '" /> 
         var add_link = '<a href="#" class="remove">Remove</a>' 
         $('body').append('<p>' + add_input + add_link + '</p>'); 
         i++; 
        } 
       }); 

       $('.remove').live('click', function() { 
        $(this).parent('p').remove(); 
        i--; 
       }); 


      }); 
     </script> 

    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div> 
      <a href="#" id="add">Add</a> 
      <input id="File1" type="file" runat="server" size="60" /> 
      <asp:Button ID="Button1" runat="server" Text="Button" /> 
      <br /> 
      <p> 
       &nbsp;</p> 
     </div> 
     </form> 
    </body> 
    </html>

2. Exemple B: le code sous-jacent:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click 
     Dim uploads As HttpFileCollection 
     uploads = HttpContext.Current.Request.Files 

     Dim sfile As String 


     For i As Integer = 0 To (uploads.Count - 1) 

      If (uploads(i).ContentLength > 0) Then 
       Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName) 

       Try 
        uploads(i).SaveAs("C:\UploadedUserFiles\" + c) 

        sfile += uploads(i).FileName & "<br/>" 

       Catch Exp As Exception 

       End Try 

      End If 

     Next i 


    End Sub

Tout fonctionnait très bien avec l'exemple A, seulement il n'y a pas possibilité de supprimer les contorls ajoutés. Lorsque j'ai ajouté l'option de contrôle "Supprimer" avec jQuery dans l'exemple B, HttpFileCollection ne peut obtenir aucun fichier du contrôle de saisie ajouté à la page.

Source

2010-07-17 Narazana

Dans votre exemple A, dans la balise form a enctype = "multipart/form-data">

<form id="form1" runat="server" enctype="multipart/form-data">

mais il n'y a pas de propriété enctype dans l'exemple B,

<form id="form1" runat="server">

est ici une référence sur MSDN et une question sur la propriété enctype sur asp.net forum.

Si vous avez besoin de propriété de formulaire mis seulement enctype à une page spécifique que, dans le cas où vous utilisez la page principale, vous pouvez définir la propriété à cette page comme ceci:

If Not Page.IsPostBack() Then 

    Me.Form.Enctype = "multipart/form-data" 

End If

Cheer. : D

Source

2010-07-18 05:19:41

Merci pour les références. – Narazana

Ajout de contrôle d'entrée aux pages avec jQuery a un problème avec HttpFileCollection dans ASP.NET

Répondre

Questions connexes