web-dev-qa-db-ja.com

jqueryajaxとasp.netハンドラーを使用したファイルのアップロード

私はこれを機能させるために一生懸命努力していますが、ファイルのアップロード中にエラーが発生します。

ASPX

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

ハンドラ

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);
                  }
            });
      });

エラー

enter image description here

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

編集

最後に、私はこれらのことを行ってデータを形成することでそれを機能させました

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

完全に機能するコード

$('#<%= 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();
                  }
            });
      });
asp.netjqueryfile-uploadashx
7
patel.milanb

午後の強打の後、あなたが「サービス」ではなく「ハンドラー」の大きな違いを指定していることに気付いたとき、私はこの質問/解決策に戻りました。 :)また、このjqueryをバックで実行できる作業中のハンドラーについては、 https://github.com/superquinho/jQuery-File-Upload-ASPnet にアクセスし、実行しなかったものを削除しました。必要。これが私が使用しているハンドラーコードです（VS2012）。ご覧のとおり、現在はcsvアップロードにのみ使用しています。

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

これをWeb構成ファイルで使用します

<system.webServer>
 <validation validateIntegratedModeConfiguration="false" />
<handlers>
    <add name="AjaxFileUploadHandler" verb="*" 
      path="AjaxFileUploadHandler.axd"
      type="AjaxControlToolkit.AjaxFileUploadHandler, 
      AjaxControlToolkit"/>
</handlers>
1
Dev.Mustafa Alhelo
$("#file-upload")

する必要があります

$("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload")

ClientIdModeプロパティを使用して、サーバーコードのファイルアップロードコントロールを静的なサーバー側IDを持つように変更することを検討してください。そのようです：

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

そうすれば、クライアントコードのコントロールのIDがFileUpload1になることを確認できます。

1
Dave Hogan

あなたはこれを使うことができます：

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