Ajax Bild Uploader Ausgabe

Question

Ich habe ein Problem mit einem Bild-Uploader, den ich in ASP mache. Ich möchte ein Bild mit Ajax in den Projektordner hochladen.

meine html und js:

<form id="form1" runat="server"> 
    <div> 
    <asp:FileUpload ID="FileUpload1" runat="server" /> 
     <br /> 
     <br /> 
    <a href="#" id="btnImg" onclick="uploadImg()" runat="server">UPLOAD</a> 
    </div> 
    </form> 

<script> 
    function uploadImg(){ 
     var formData = new FormData(); 
     formData.append('FileUpload1', $('#btnImg')[0].files[0]); 
     $.ajax({ 
      type: "POST", 
      url: 'Default.aspx/imageUpload', 
      data: formData, 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       alert(data); 
      } 
     }); 

    } 
</script> 

mein Bild-Upload-Code (C#):

[WebMethod] 
protected void imageUpload(object sender, EventArgs e) 
{ 
    if (FileUpload1.HasFile) 
    { 
     string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName); 
     Guid _fileNameRandom = Guid.NewGuid(); 
     string _fileNameStr = _fileNameRandom.ToString(); 
     FileUpload1.PostedFile.SaveAs(Server.MapPath("/Images/") + (_fileNameStr + fileName)); 
     Response.Redirect(Request.Url.AbsoluteUri); 
    } 
} 

IN Konsole i die folgenden Fehlermeldungen erhalten: Uncaught Typeerror: kann nicht lesen Eigenschaft '0' von undefined bei uploadImg (Default.aspx: 32) bei HTMLAnchorElement.onclick (Default.aspx: 21)

Leitung 32 in Defau lt.aspx ist:}); des js-Skripts. und Zeile 21 ist: Funktion uploadImg() {

Hoffe jemand kann mir helfen, dies zu lösen.

Answer 1

$('#btnImg')[0] ist der Schuldige.

$('#btnImg')[0] wird nie eine Dateisammlung haben, denn das ist ein Ankerelement, versuchen Sie es zu ändern $('#FileUpload1')[0], und sehen, ob das funktioniert? Wenn nicht, müssen Sie auf das Element input[type='file'] verweisen, von dem ich denke, dass der ASP-Helfer für Sie mit dieser ID rendern sollte.