问题
I am trying hard to get this working but i ma getting error while uploading file.
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);
}
});
});
Error
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("ctl00$PageContent$Signup$ctl06$MWFileUpload$btnUpload",
"", true, "", "", false, false))"
id="ctl00_PageContent_Signup_ctl06_MWFileUpload_btnUpload" class="button">
EDITS
Finally, i got it working by doing these things to form data
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);
FULL WORKING CODE
$('#<%= 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();
}
});
});
回答1:
After a whole afternoon of banging, I came back to this question/solution when I realized that you had specified "handler" rather than "service" big difference. :) Also for a working hander that can run this jquery in the back I went to https://github.com/superquinho/jQuery-File-Upload-ASPnet and trimmed out what I didn't need. Here is the handler code that I am using (VS2012). As you can see I only use it right now for csv uploads.
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:
$("#file-upload")
should be
$("#ctl00_PageContent_Signup_ctl06_MWFileUpload_file-Upload")
Look at changing the file-upload control on the server code to have a static server side id by using the ClientIdMode property. Like so:
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="file-upload-dialog" ClientIdMode="Static" />
Then you can be sure the ID of the control in the client code will be FileUpload1
回答3:
use this in your web configuration file
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<handlers>
<add name="AjaxFileUploadHandler" verb="*"
path="AjaxFileUploadHandler.axd"
type="AjaxControlToolkit.AjaxFileUploadHandler,
AjaxControlToolkit"/>
</handlers>
回答4:
You can use this:
$("#<% = FileUpload1.clientID %>")
来源：https://stackoverflow.com/questions/17109357/file-upload-using-jquery-ajax-and-asp-net-handler