Ajax画像アップローダーの問題

Question

私はASPで作成している画像アップローダーに問題があります。私はajaxを使用してプロジェクトフォルダに画像をアップロードしたいと思います。

私のHTMLと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> 

私の画像アップロードコード（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); 
    } 
} 

： キャッチされない例外TypeErrorは：プロパティを読み取ることができません '0' のundefined at uploadImg（Default.aspx：32） at HTMLAnchorElement.onclick（Default.aspx：21）

ライン32 in defau lt.aspxは：}）; jsスクリプトの と21行目は：function uploadImg（）{

誰でもこの問題を解決するのに役立ちます。

Answer 1

$('#btnImg')[0]が原因です。

$('#btnImg')[0]はアンカーエレメントであるため、ファイルコレクションを持たない場合は、$('#FileUpload1')[0]に変更してみてください。そうでない場合は、input[type='file']要素を参照する必要があります。これは、ASPヘルパーがそのIDでレンダリングする必要があると思います。