使用 Jquery/Ajax 上传 ASP.Net 异步文件

Question

我正在尝试在 ASP.Net Web 表单页面中使用 jQuery 进行文件上传。这是我的jQuery代码：

var urlToSend = "Default.aspx/SaveNewMember"
var file = document.getElementById("MainContent_fu_image").files[0];
var formData = new FormData();
formData.append(file.name, file);    

$.ajax({                     
       type: "POST",
       url: urlToSend,               
       data:formData,
       processData: false,
       contentType: false  ,          
       success: function (response) {       
             displayMessage("success", "Added new team member");
       },
       error: function (message) {
            displayMessage("warning", 'error' + message.statusText);
       }
  });

还有我的 VB 代码：

  <System.Web.Services.WebMethod()>
    Public Shared Function SaveNewMember() As String
        Dim myPage = TryCast(HttpContext.Current.Handler, _Default)
        Try
            For Each file As String In myPage.Context.Request.Files
                'do something
            Next
        Catch __unusedException1__ As Exception            
            Return ("Upload failed")
        End Try
        Return ("File uploaded successfully")
    End Function

我遇到的问题是，当我运行我的代码时，我的 VB 代码上的断点永远不会被命中。此外，当我调试 jquery 代码时，我看到来自服务器的响应是页面的完整 HTML。使用 jQuery 进行异步文件上传的正确方法是什么？

Answer 1

嗯，这不是我想要解决问题的方式，但它确实有效。对于为什么我不能在同一页面中将其作为网络方法执行此操作，我仍然会很感激一些反馈。但是，我通过将我的服务器代码放在一个 n *.ashx 文件中解决了这个问题。对于那些感兴趣的人，这是我的解决方案：

jQuery：

    var myFileUpload = $("#MainContent_fu_image").get(0);
    var myFiles = myFileUpload.files;
    var data = new FormData();

    data.append(myFiles[0].name, myFiles[0]);
    data.append("first_name", first_name.val());
    data.append("last_name", last_name.val());
    data.append("job_title", job_title.val());
    data.append("job_description", job_description.val());
    data.append("order_id", order_id.val());

    $.ajax({  
       url: 'FileUpload.ashx',
       type: "POST",                              
       data: data ,                
       contentType: false,
       processData: false,       
       data: data,            
       success: function (response) {     
           displayMessage("success", "Added new team member");
       },
       error: function (message) {
           displayMessage("warning", 'error' + message.statusText);
       }
   });

文件上传.ashx

Imports System.IO
Imports System.Web
Imports System.Web.Services   

Public Class FileUpload
    Implements System.Web.IHttpHandler

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        context.Response.ContentType = “multipart/form-data”
        context.Response.Expires = -1
        Try

            Dim postedFile As HttpPostedFile = context.Request.Files.Item(0)
            Dim imgPath As String = HttpContext.Current.Server.MapPath("~/FileUploads/TeamMembersPhotos/")
            Dim extension = Path.GetExtension(postedFile.FileName)
            Dim firstName As String = context.Request.Form.Item("first_name")
            Dim lastName As String = context.Request.Form.Item("last_name")
            Dim jobTitle As String = context.Request.Form.Item("job_title")
            Dim jobDescription As String = context.Request.Form.Item("job_description")
            Dim orderId As String = context.Request.Form.Item("order_id")
            Dim imgName As String = Convert.ToString(Guid.NewGuid()) & extension       

            If Not Directory.Exists(imgPath) Then
                Directory.CreateDirectory(imgPath)
            End If

            //function to add data to database

            If extension IsNot Nothing Then
                Dim fileLocation = String.Format(“{0}/{1}”, imgPath, imgName)
                postedFile.SaveAs(fileLocation)
                context.Response.Write(fileLocation)
                context.Response.StatusCode = 200
            End If
            context.Response.Write("{'id':'" & result & "'}")  



        Catch ex As Exception
            Throw ex
        End Try


    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class