jQuery + ajax + ashx实现无刷新文件上传

主要分享的是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、读懂代码稍作修改即可实现批量上传。

jQuery + ajax + ashx实现无刷新文件上传

猜你喜欢