tải lên tệp bằng cách sử dụng jquery ajax và trình xử lý asp.net

Question

Tôi đang cố gắng hết sức để làm việc này nhưng tôi gặp lỗi khi tải lên tệp.

ASPX

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

Handler

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

Lỗi

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

CÁC CHỈNH SỬA

Cuối cùng, tôi đã nhận nó làm việc bằng cách thực hiện những điều này để tạo dữ liệu

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

ĐẦY ĐỦ LÀM VIỆC MÃ

$('#<%= 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(); 
        } 
      }); 
     }); 

Answer 1

$("#file-upload") 

nên

$("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload") 

Nhìn vào việc thay đổi quyền kiểm soát tập tin tải lên trên mã máy chủ để có một tĩnh phía máy chủ id bằng ClientIdMode tài sản. Cũng giống như vậy:

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

Sau đó, bạn có thể chắc chắn ID của điều khiển trong các mã khách hàng sẽ FileUpload1

Answer 2

Sau một buổi chiều toàn bộ đập, tôi trở lại câu hỏi này/giải pháp khi tôi nhận ra rằng bạn đã chỉ định "xử lý" thay vì "dịch vụ" khác biệt lớn. :) Cũng cho một hander làm việc có thể chạy jquery này ở phía sau tôi đã đi đến https://github.com/superquinho/jQuery-File-Upload-ASPnet và cắt ra những gì tôi không cần. Đây là mã xử lý mà tôi đang sử dụng (VS2012). Như bạn thấy, tôi chỉ sử dụng nó ngay bây giờ để tải lên 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 

Answer 3

sử dụng này trong web của bạn tập tin cấu hình

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

Answer 4

Bạn có thể sử dụng này:

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