主要分享的是jQuery + ajax的数据提交技巧,至于是不是.NET框架关系不大,大家可以用自己所用的框架处理上传操作。
前台界面代码:
<form id="form1" action="#" runat="server" enctype="multipart/form-data">
<asp:FileUpload ID="FileUpload1" runat="server" />
<a href="#" id="btnUpload" class="easyui-linkbutton" data-options="iconCls:'icon-add'">上传文件</a>
</form>
例子中用的是ASP.NET的 FileUpload 控件和easyui的 linkbutton 插件,不过这些都不是必须的,大家按需使用即可,也可以是html的一般控件。反正都是一个文件浏览框和一个上传按钮。
需要注意的是:
1、form标签必不可少,不能只有文件浏览控件和上传按钮,且标签中 enctype="multipart/form-data" 必不可少。
2、文件浏览控件如果是在客户端运行,则必须指明name属性。服务器端运行可以不指出,如例子。
3、至于指定表单属性后能不能正常获取表单中的其他元素信息,不在本文讨论范围,暂未尝试。
利用jQuery + ajax提交表单:
<script>
$(document).ready(function () {
//单击“上传数据”按钮
$("#btnUpload").click(function () {
var data = new FormData($("#form1")[0]);
$.ajax({
type: "POST",
url: "OrderManage.ashx?action=uploadfile",
contentType: false, //必须指定
processData: false, //必须指定
data: data,
dataType: "text",
cache: false,
success: function (result) {
$.messager.alert("结果", result, "info");
}
});
})
});
</script>
需要注意的是:
1、FormData方法有浏览器版本限制,具体信息请自行查阅。不过一般来说主流浏览器都支持。
2、FormData方法中,参数[0]表示表单中第一个元素,需要和type="file"控件对应。
3、contentType: false, processData: false 这两句必不可少否则无法实现此功能。
服务器端一般处理文件ashx执行上传:
if (action == "uploadfile")
{
HttpFileCollection files = context.Request.Files;
string filePath = System.Web.HttpContext.Current.Server.MapPath("~/UploadFiles/");
if (files.Count > 0){files[0].SaveAs(filePath + System.IO.Path.GetFileName(files[0].FileName));}
context.Response.Write("上传成功");
context.Response.End();
}
需要注意的是:
1、filePath的值自行指定即可,但必须是物理路径,例子中是上传到网站根目录下的UploadFiles文件夹内。
2、读懂代码稍作修改即可实现批量上传。