logo标签列表

使用jQuery Ajax和ASP.NET处理程序进行文件上传

asp.netjqueryfile-uploadashx
7

我正在努力让这个工作起来，但上传文件时出现了错误。

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


（注：此处翻译为“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:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" /> 生成的HTML吗？此外，在控制台选项卡中，你可以输入 var fileInput = $("#file-upload") 并检查它的值。 - TCHdvlp
在控制台中显示未定义.. 我不知道为什么。 - patel.milanb
是的！你正在寻找一个id为file-upload的元素。在生成的HTML中没有这个id的元素。尝试使用DaveHogan的提示。 - TCHdvlp
尝试了这个解决方案，但没有运气...仍然是同样的错误。 - patel.milanb
做得好，细节处理得很棒！ - Ofir Hadad
4个回答
2

整个下午都在摸索，直到我意识到你指定的是“handler”而不是“service”，这是一个很大的区别。 :) 此外，为了使这个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
1
$("#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

尝试使用在HTML中生成的ID并在jQuery中复制，但仍然没有成功。错误相同。 - patel.milanb
诀窍在于使用ClientIDMode设置为静态，以确保元素的客户端ID匹配（按钮控件也是如此）。 - Dave Hogan
是的，那是真的，但我不能这样做，因为它可能会引起其他问题。但我在jQuery中放置了相同的ID，为什么还会出现错误？ - patel.milanb
确保ID匹配，并在浏览器的监视/控制台窗口中确认var fileInput的结果。如果ID存在，则不会得到“未定义”。 - Dave Hogan
1
请查看我的编辑，请注意，我通过将文件数据附加到表单对象来使其正常工作。 - patel.milanb
1
将此代码添加到您的网络配置文件中。
<system.webServer>
 <validation validateIntegratedModeConfiguration="false" />
<handlers>
    <add name="AjaxFileUploadHandler" verb="*" 
      path="AjaxFileUploadHandler.axd"
      type="AjaxControlToolkit.AjaxFileUploadHandler, 
      AjaxControlToolkit"/>
</handlers>

0
你可以使用这个：
$("#<% = FileUpload1.clientID %>")
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接