You will need to implement requests of type Multipart
, part of the HTTP 1.1
specification.
For demonstration purposes, I have created the following webform , containing text fields and a fileupload:
<%@ Page Language="C#" (...)%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Whose appearance, when viewed in Chrome, is as follows:
![](https://i.stack.imgur.com/gdvza.png)
I'veinterceptedthepayloadviaWireshark.Thisistherequestsenttotheserver:
POST/script/OpCenter/samplewebpart.aspxHTTP/1.1Host:[SERVER].[DOMAIN]Connection:keep-aliveContent-Length:12373Cache-Control:max-age=0Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Origin:http://[SERVER].[DOMAIN]User-Agent:Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/36.0.1985.125Safari/537.36Content-Type:multipart/form-data;boundary=----WebKitFormBoundaryCYhgqEfRdnZkrdRfReferer:http://[SERVER].[DOMAIN]/script/OpCenter/samplewebpart.aspxAccept-Encoding:gzip,deflate,sdchAccept-Language:en-US,en;q=0.8,pt;q=0.6------WebKitFormBoundaryCYhgqEfRdnZkrdRfContent-Disposition:form-data;name="__VIEWSTATE"
/wEPDwULLTEwNjc5MDgzOTQPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGFkZOW8eX8I0G+ceXPjDwfXA1MRJuxEFHvp1y5twOS3H9uw
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="__EVENTVALIDATION"
/wEWAwLQ+p/sDwLs0bLrBgKM54rGBqByybWBtQAZmIHlcbrUlcixkQ/+JlgNypmZ4vFxAn6b
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="TextBox1"
teste
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="FileUpload1"; filename="Alert.png"
Content-Type: image/png
.PNG
....IHDR.............\r.f....gAMA....7.......tEXtSoftware.Adobe ImageReadyq.e<..,.IDATx..}y..wu......5..4:,....,..O..l.M.......q..5.\.%......;$..
(mais ou menos 12Kb depois...)
.f....'0...^..'0.0..&......'0.........'.'0.L.......'0.0..&......'0....F....0.p9.Xd..F....IEND.B'.
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="Button1"
Button
------WebKitFormBoundaryCYhgqEfRdnZkrdRf--
(Note that even hidden ASP.NET state control fields, __VIEWSTATE
and __EVENTVALIDATION
, are present in multipart content.)
That said, let's go to the client side solution using jQuery and Ajax:
1) Prepare the data to be sent by packaging them into an instance of the FormData class
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
(Include, at this time, all the data you need, including those in the form, via data.append
.)
2) Perform your Ajax call by passing the instance of FormData as a parameter:
$.ajax({
url: 'paginadestino.aspx',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
References:
This is a way to implement Client side Multipart in an Ajax call (answer accepted.)
This post has an example of how to treat multipart server side (in C #).
(References are in English.)