[asp.net] ajax无刷新文件上传与FormData使用介绍

前端主要进行浏览器类别判断，如果是chrome浏览器，就使用ajax文件上传方式，如果时ie或者其他浏览器，就采用传统的表单上传文件。

通常我们提交表单时，会将form中的所有表单元素的name和value组成一个queryString，这就是为什么表单元素可以没有Id但是不能没有name属性的原因。用jQuery方法，就是将所有表单元素序列化，即serialize。从而将表单中的参数提交到服务器端。然而，上述方法只能传递一般的参数，上传文件的文件流是不能被序列化传递的。所以就需要目前Html5的FormData对象，实现Ajax比方式的文件上传。

创建FormData对象的三种方式：

(1) 创建一个空的FormData对象，并通过append方法，逐个添加键值对。

var fdata = new FormData();

fdata.append("name","jack");

(2) 取得Form表单对象，并将其传入FormData中。(表单Id为fm)

var fobj = document.getElementById("fm");

var fdata = new FormData(fobj);

(3) 利用form元素的getFormData方法获取。

var fobj = document.getElementById("fm");

var fdata = fobj.getFormData();

                    var fdata = new FormData();
                    fdata.append("Id", $("#id").val());
                    fdata.append("JZId", $("#jzid").val());
                    fdata.append("Name", $("#name").val());
                    fdata.append("Introduce", $("#introduce").val());
                    fdata.append("OldName", row.Name);
                    $.ajax({
                        url: url1,
                        type: "POST",
                        data: fdata,
                        success: function (data) {
                            data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                            $.messager.alert("操作提示", data.Message, 'info'); //显示后台信息
                            if (data.Success) {
                                $('#dlg').dialog('close'); 	    //关闭弹出框
                                $("#dg").datagrid('reload');
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest.status);
                            alert(XMLHttpRequest.readyState);
                            alert(textStatus);
                        }
                    });

1.前端页面

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Show.aspx.cs" Inherits="Web.File.Show" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <title>文档管理</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content" region="center" title="文档库" style="padding: 5px;">
        <table id="dg" class="easyui-datagrid" url="/File/FileHandler.ashx?action=GetAll"
            toolbar="#toolbar" rownumbers="true" fitcolumns="true" singleselect="true">
            <thead>
                <tr>
                    <th field="Id" width="50">
                        文档编号
                    </th>
                    <th field="JZId" width="50">
                        机组编号
                    </th>
                    <th field="Name" width="50">
                        文档名
                    </th>
                    <th field="UploadTime" width="50">
                        上传时间
                    </th>
                    <th field="Note" width="50">
                        备注
                    </th>
                    <th field="Type" width="50">
                        类型
                    </th>
                </tr>
            </thead>
        </table>
        <div id="toolbar">
            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addFile()">添加</a> 
            <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteFile()">删除</a>
        </div>
        <!--对话框-->
        <div id="dlg" class="easyui-dialog" style="width: 400px; padding: 10px 20px" closed="true"
            buttons="#dlg-buttons">
            <form id="fm" method="post" enctype="multipart/form-data">
            <div style="margin-bottom: 20px">
                <input id="did" class="easyui-textbox" name="Id" type="text" style="width: 100%"
                    data-options="label:'文档编号:',required:true">
            </div>
            <div style="margin-bottom: 20px">
                <input id="cc2" class="easyui-combobox" name="JZId" label="机组编号" style="width: 100%"
                    data-options="valueField: 'id', textField: 'text', url: '/JZ/JZHandler.ashx?action=GetAllJZId',required:true" />
            </div>
            <div style="margin-bottom: 20px">
                <input id="File" class="easyui-filebox" name="File" style="width: 100%" data-options="label:'文档名:',required:true" />
            </div>
            <div style="margin-bottom: 20px">
                <input id="cc1" class="easyui-textbox" name="Type" label="类型" style="width: 100%"
                    data-options="valueField:'id',textField:'text',required:false">
            </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveFile()">保存</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">
                取消</a>
        </div>
        <script type="text/javascript">
            function addFile() {
                $('#dlg').dialog('open').dialog('setTitle', '添加文档信息');
                $('#fm').form('clear');
                url1 = '/File/FileHandler.ashx?action=Add';
            }
            function saveFile() {
                if (getBrowserType() == "Chrome") {
                    $.ajax({
                        url: url1,
                        async: false,
                        type:"POST",
                        cache: false,//上传文件不需要缓存
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                        data: new FormData($('#fm')[0]),
                        success: function (data) {
                            data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                            $.messager.alert("操作提示", data.Message, 'info'); //显示后台信息
                            if (data.Success) {
                                $('#dlg').dialog('close');     //关闭弹出框
                                $("#dg").datagrid('reload');
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest.status);
                            alert(XMLHttpRequest.readyState);
                            alert(textStatus);
                        }
                    });
                } else {
                    $('#fm').form('submit', {
                        url: url1, //注意添加和修改的url不同
                        onSubmit: function () {
                            //验证表单是否合法
                            return $(this).form('validate');
                        },
                        success: function (res) {
                            data = eval('(' + res + ')');      //将一个json字符串解析成js对象
                            $.messager.alert("操作提示", data.Message, 'info'); //提示后台错误信息
                            if (data.Success) {
                                $('#dlg').dialog('close');     //关闭弹出框
                                $('#dg').datagrid('reload');    //重新加载数据
                            }
                        }
                    });
                }
            }
            function deleteFile() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $.messager.confirm("确认删除", "您确定要删除当前文档[" + row.Name + "]的信息吗？", function (r) {
                        if (r) {
                            //用户确定删除
                            $.get('/File/FileHandler.ashx', { Id: row.Id, action: "Delete",Note:row.Note }, function (res) {
                                res = eval('(' + res + ')');      //将一个json字符串解析成js对象
                                $.messager.alert("操作提示", res.Message, 'info'); //显示后台信息
                                if (res.Success) {
                                    $("#dg").datagrid('reload');
                                }
                            });
                        }
                    });
                } else {
                    $.messager.alert("操作提示", "请选中需要删除的用户所在的行！", 'info');
                }
            }
        </script>
    </div>
</asp:Content>

2.后台处理程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Model;
using Common;
using DataService;
using System.Data;
using System.IO;
namespace Web.File
{
    /// <summary>
    /// FileHandler 的摘要说明
    /// </summary>
    public class FileHandler : IHttpHandler
    {
        DataAccess data = new DataAccess();
        public void ProcessRequest(HttpContext context)
        {
            string action = context.Request["action"].ToString();
            context.Response.ContentType = "text/plain";
            ResultInfo result = new ResultInfo();
            DocInfo file = new DocInfo();
            switch (action)
            {
                case "Add":
                    try
                    {
                        HttpPostedFile f = context.Request.Files["File"];
                        if (f == null)
                        {
                            result.Success = false;
                            result.Message = "请选择文件!";
                        }
                        else
                        {
                            //获取网站根目录的物理路径
                            string path = HttpContext.Current.Request.MapPath("~/");
                            //获取文件名
                            string name = Path.GetFileName(f.FileName);
                            //获取文件的扩展名
                            string ext = Path.GetExtension(name);
                            //支持的文件上传类型列表
                            List<string> ExtList = new List<string>(new string[] { ".jpg", ".doc", ".docx", ".xls" });
                            string dir = "";
                            if (ExtList.Contains(ext))
                            {
                                dir = "/Files/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
                                //新建文件夹
                                string dirtocreate = path + Path.GetDirectoryName(dir);
                                if (!Directory.Exists(dirtocreate))
                                {
                                    Directory.CreateDirectory(dirtocreate);
                                }
                                string newfileName = Guid.NewGuid().ToString();//新的文件名
                                string fullDir = dir + newfileName + ext;//完整路径
                                f.SaveAs(context.Request.MapPath(fullDir));//保存到服务器上
                                //将文件信息保存到数据库中
                                file.Id = int.Parse(context.Request.Form["Id"]);
                                file.JZId = context.Request.Form["JZId"];
                                file.Name = name;//文件名
                                file.UploadTime = DateTime.Now.ToString();//文件上传时间
                                file.Note = dir + newfileName + ext;//备注信息存储的是文件的物理地址
                                file.Type = context.Request.Form["Type"];
                                result.Success = Add(file);
                                result.Message = "添加文档信息" + ((result.Success == true) ? "成功" : "失败") + "!";
                            }
                            else
                            {
                                result.Success = false;
                                result.Message = "不支持的文件类型!";
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        result.Success = false;
                        result.Message = "异常:" + ex.Message;
                    }
                    string jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
                    context.Response.Write(jss);
                    context.Response.End();
                    break;
                case "GetAll":
                    context.Response.Write(GetAll());
                    break;
                case "Delete":
                    //获取文件编号
                    int id = int.Parse(context.Request["Id"]);
                    //获取文件的物理路径
                    string filepath = context.Request.MapPath(context.Request["Note"].Replace("/", "\\"));
                    //判断文件是否存在,若存在,则删除
                    if (System.IO.File.Exists(filepath))
                    {
                        System.IO.File.Delete(filepath);
                    }
                    result.Success = Delete(id);
                    result.Message = "删除文档信息" + ((result.Success == true) ? "成功" : "失败") + "!";
                    jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
                    context.Response.Write(jss);
                    context.Response.End();
                    break;
                default:
                    break;
            }
        }

        /// <summary>
        /// 保存文档的信息
        /// </summary>
        /// <param name="file"></param>
        public bool Add(DocInfo file)
        {
            string sql = "INSERT INTO `web`.`文档库`(`文档编号`, `机组编号`, `文档名`, `上传时间`, `备注`, `类型`) VALUES (" +
                file.Id + ", '" +
                file.JZId + "', '" +
                 file.Name + "', '" +
                 file.UploadTime + "', '" +
                 file.Note + "', '" +
                 file.Type + "')";
            return data.ExecSql(sql);
        }

        /// <summary>
        /// 获取所有文档信息
        /// </summary>
        /// <returns>文档信息列表的json字符串形式</returns>
        public string GetAll()
        {
            List<DocInfo> files = new List<DocInfo>();
            string sql = "SELECT * FROM `web`.`文档库`";
            DataTable dTable = data.GetTable(sql);
            for (int i = 0; i < dTable.Rows.Count; i++)
            {
                DocInfo file = new DocInfo();
                file.Id = int.Parse(dTable.Rows[i]["文档编号"].ToString());
                file.JZId = dTable.Rows[i]["机组编号"].ToString();
                file.Name = dTable.Rows[i]["文档名"].ToString();
                file.UploadTime = dTable.Rows[i]["上传时间"].ToString();
                file.Note = dTable.Rows[i]["备注"].ToString();
                file.Type = dTable.Rows[i]["类型"].ToString();
                files.Add(file);
            }
            string result = JsonHelper<DocInfo>.ListToJsonString(files);
            return result;
        }

        /// <summary>
        /// 删除文档信息
        /// </summary>
        /// <param name="id">文档信息</param>
        /// <returns>更新是否成功</returns>
        public bool Delete(int id)
        {
            string sql = "Delete from `web`.`文档库` WHERE `文档编号` = " + id;
            return data.ExecSql(sql);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

3.实现效果