загрузка файла с использованием jquery ajax и обработчика 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);
                  }
            });
      });

Ошибка

введите здесь описание изображения

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

person patel.milanb    schedule 14.06.2013    source источник
comment
Вы можете опубликовать HTML-код, сгенерированный <asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" />. Также во вкладке консоли можно набрать var fileInput = $("#file-upload") и проверить, какое у него значение   -  person TCHdvlp    schedule 14.06.2013
comment
посмотрите мои правки пожалуйста...   -  person patel.milanb    schedule 14.06.2013
comment
в консоли написано undefined.. не знаю почему   -  person patel.milanb    schedule 14.06.2013
comment
Да ! вы ищете элемент с идентификатором file-upload. В сгенерированном html нет элемента с таким идентификатором. Попробуйте совет Дейва Хогана.   -  person TCHdvlp    schedule 14.06.2013
comment
пробовал с решением безуспешно... все та же ошибка   -  person patel.milanb    schedule 14.06.2013
comment
молодец по деталям!   -  person Ofear    schedule 18.11.2013


Ответы (4)


После целого дня ударов я вернулся к этому вопросу/решению, когда понял, что вы указали большую разницу «обработчик», а не «сервис». :) Также для рабочего обработчика, который может запускать этот 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
person HelloW    schedule 16.08.2013

$("#file-upload") 

должно быть

$("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload")

Посмотрите на изменение элемента управления загрузкой файлов в коде сервера, чтобы иметь статический идентификатор на стороне сервера с помощью свойства ClientIdMode. Вот так:

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

Тогда вы можете быть уверены, что идентификатор элемента управления в клиентском коде будет FileUpload1

person Dave Hogan    schedule 14.06.2013
comment
попробовал с идентификатором, сгенерированным в html, справившись с jquery.. все равно не повезло.. та же ошибка - person patel.milanb; 14.06.2013
comment
Хитрость заключается в том, чтобы использовать ClientIDMode как статический, чтобы вы могли убедиться, что идентификатор клиента элементов совпадает. (то же самое с кнопочным управлением). - person Dave Hogan; 14.06.2013
comment
да, это правда, но я не могу этого сделать, потому что это может вызвать другую проблему. НО я помещаю тот же идентификатор в jquery, тогда почему я получаю сообщение об ошибке? - person patel.milanb; 14.06.2013
comment
Убедитесь, что идентификаторы точно совпадают, и подтвердите результат var fileInput в окне просмотра/консоли вашего браузера. Если идентификатор существует, вы не получите «неопределенный». - person Dave Hogan; 14.06.2013
comment
посмотрите мои правки, пожалуйста... я заработал, добавив данные файла для формирования объекта - person patel.milanb; 17.06.2013

используйте это в своем файле веб-конфигурации

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

person Dev.Mustafa Alhelo    schedule 11.11.2013

Вы можете использовать это:

$("#<% = FileUpload1.clientID %>")
person omid    schedule 30.01.2014