Datei-Upload mit jQuery AJAX und ASP.net-Handler

Question

Ich bin bemüht, dies funktioniert, aber ich bekomme Fehler beim Hochladen von Datei.

ASPX

<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" /> 
<asp:Button runat="server" ID="btnUpload" CssClass="btn upload" Text="Upload" /> 

Handler

public void ProcessRequest(HttpContext context) 
     { 
      context.Response.ContentType = "multipart/form-data"; 
      context.Response.Expires = -1; 
      try 
      { 
        HttpPostedFile postedFile = context.Request.Files["file"]; 
        string savepath = HttpContext.Current.Server.MapPath("~/assets/common/CompetitionEntryImages/"); 
        var extension = Path.GetExtension(postedFile.FileName); 

        if (!Directory.Exists(savepath)) 
         Directory.CreateDirectory(savepath); 

        var id = Guid.NewGuid() + extension; 
        if (extension != null) 
        { 
         var fileLocation = string.Format("{0}/{1}", 
                 savepath, 
                 id); 

         postedFile.SaveAs(fileLocation); 
         context.Response.Write(fileLocation); 
         context.Response.StatusCode = 200; 
        } 
      } 
      catch (Exception ex) 
      { 
        context.Response.Write("Error: " + ex.Message); 
      } 
     } 

JQuery

$(document).ready(function() { 
      email = $("input[id$='emailHV']").val(); 
      alert(email); 
      $('#aspnetForm').attr("enctype", "multipart/form-data"); 
     }); 



$('#<%= btnUpload.ClientID %>').on('click', function (e) { 
      e.preventDefault(); 
      var fileInput = $('#ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1'); 
      var fd = new window.FormData(); 
      fd.append('file', fileInput.files[0]); 

      $.ajax({ 
        url: '/charity-challenge/MWFileUploadHandler.ashx', 
        data: fd, 
        processData: false, 
        contentType: false, 
        type: 'POST', 
        success: function (data) { 
         alert(data); 
        } 
      }); 
     }); 

Fehler

HTML

<input type="file" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$FileUpload1" id="ctl00_PageContent_Signup_ctl06_MWFileUpload_FileUpload1" class="file-upload-dialog"> 

<input type="submit" name="ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload" 
value="Upload" onclick="javascript:WebForm_DoPostBackWithOptions(new 
WebForm_PostBackOptions(&quot;ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload&quot;, 
&quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button"> 

EDITS

Schließlich ich habe es durch die Arbeit, diese Dinge zu tun, Daten zu bilden

var fileData = fileInput.prop("files")[0]; // Getting the properties of file from file field 
     var formData = new window.FormData();     // Creating object of FormData class 
     formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data 
     formData.append("user_email", email); 

FULL ARBEITS CODE

$('#<%= btnUpload.ClientID %>').on('click', function (e) { 
      e.preventDefault(); 
      var fileInput = $('#<%= FileUpload1.ClientID %>'); 
      var fileData = fileInput.prop("files")[0]; // Getting the properties of file from file field 
      var formData = new window.FormData();     // Creating object of FormData class 
      formData.append("file", fileData); // Appending parameter named file with properties of file_field to form_data 
      formData.append("user_email", email); 
      $.ajax({ 
        url: '/charity-challenge/MWFileUploadHandler.ashx', 
        data: formData, 
        processData: false, 
        contentType: false, 
        type: 'POST', 
        success: function (data) { 
         var obj = $.parseJSON(data); 
         if (obj.StatusCode == "OK") { 
           $('#<%= imagePath.ClientID %>').val(obj.ImageUploadPath); 
           $('.result-message').html(obj.Message).show(); 
         } else if (obj.StatusCode == "ERROR") { 
           $('.result-message').html(obj.Message).show(); 
         } 
        }, 
        error: function (errorData) { 
         $('.result-message').html("there was a problem uploading the file.").show(); 
        } 
      }); 
     }); 

Answer 1

$("#file-upload") 

sollten über die ClientIdMode Eigenschaft auf eine Änderung der Datei-Upload-Steuerelement auf dem Server Code

$("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload") 

Blick sein, um einen statischen Server-Seite-ID zu haben. Wie so:

<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" ClientIdMode="Static" /> 

Dann können Sie sicher sein, die ID der Steuerung im Client-Code FileUpload1

Answer 2

Nach einem ganzen Nachmittag sein wird, hämmern, kam ich zurück auf diese Frage/Lösung, als ich merkte, dass Sie haben "Handler" angegeben, anstatt den großen Unterschied zu "bedienen". :) Auch für einen arbeitenden Handler, der diese jQuery in den Rücken rennen kann, ging ich auf https://github.com/superquinho/jQuery-File-Upload-ASPnet und trimmte was ich nicht brauchte. Hier ist der Handler-Code, den ich verwende (VS2012). Wie Sie sehen können, verwende ich es gerade jetzt für CSV-Uploads.

Imports System 
Imports System.Web 
Imports System.Data 

Public Class FileUpload : Implements IHttpHandler, IReadOnlySessionState 
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest 
     Try 
      Select Case context.Request.HttpMethod 
       Case "POST" 
        Uploadfile(context) 
        Return 

      Case Else 
       context.Response.ClearHeaders() 
       context.Response.StatusCode = 405 
       Return 
     End Select 

    Catch ex As Exception 
     Throw 
    End Try 

End Sub 

Private Sub Uploadfile(ByVal context As HttpContext) 

    Dim i As Integer 
    Dim files As String() 
    Dim savedFileName As String = String.Empty 
    Dim js As New Script.Serialization.JavaScriptSerializer 

    Try 

     If context.Request.Files.Count >= 1 Then 

      Dim maximumFileSize As Integer = ConfigurationManager.AppSettings("UploadFilesMaximumFileSize") 

      context.Response.ContentType = "text/plain" 
      For i = 0 To context.Request.Files.Count - 1 
       Dim hpf As HttpPostedFile 
       Dim FileName As String 
       hpf = context.Request.Files.Item(i) 

       If HttpContext.Current.Request.Browser.Browser.ToUpper = "IE" Then 
        files = hpf.FileName.Split(CChar("\\")) 
        FileName = files(files.Length - 1) 
       Else 
        FileName = hpf.FileName 
       End If 


       If hpf.ContentLength >= 0 And (hpf.ContentLength <= maximumFileSize * 1000 Or maximumFileSize = 0) Then 
        Dim d As Date = Now 
        savedFileName = HttpRuntime.AppDomainAppPath & "CSVLoad\" + d.Year.ToString + d.DayOfYear.ToString + d.Hour.ToString + d.Minute.ToString + d.Second.ToString + d.Millisecond.ToString + ".csv" 

        hpf.SaveAs(savedFileName) 

       Else 

       End If 
      Next 

     End If 

    Catch ex As Exception 
     Throw 
    End Try 

End Sub 

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable 
    Get 
     Return False 
    End Get 
End Property 

End Class 

Answer 3

Verwendung dieses in Ihrem Web-Konfigurationsdatei

<system.webServer> 
<validation validateIntegratedModeConfiguration="false" /> 
<handlers> 
    <add name="AjaxFileUploadHandler" verb="*" 
     path="AjaxFileUploadHandler.axd" 
     type="AjaxControlToolkit.AjaxFileUploadHandler, 
     AjaxControlToolkit"/> 
</handlers> 

Answer 4

können Sie verwenden:

$("#<% = FileUpload1.clientID %>")