参考:https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
旧的浏览器只能通过IFrame在不刷新页码的情况下提交文件到服务器。但在 IE10、Firefox 4.0、Chrome 7、Safari5、Opera 12后,可以利用 FormData 对象方便地提交文件到服务器。
关键代码:
<body>
<div>
<form method="post">
<label>用户名:</label>
<input id="userName" type="text" name="userName" />
<br />
<label>文件名:</label>
<input id="file" type="file" name="file" />
<input id="btn" type="button" value="提交" />
</form>
</div>
<script>
$("#btn").click(function (e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
formData.append('userName', $('#userName').val());
$.ajax({
type: "POST",
// method: "POST", //jquery 1.9 以后版本用method
url: "/Home/GetFile",
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
data: formData,
success: function (data, status) {
alert("用户名为:" + data.userName + ",上传的文件的大小为:" + data.fileSize);
}
});
});
</script>
</body>