[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.實現效果
