|
作為程序員的我們,，經(jīng)常會要用到文件的上傳和下載功能,。到了需要用的時(shí)候，各種查資料,。有木有..有木有...,。為了方便下次使用，這里來做個(gè)總結(jié)和備忘,。
利用表單實(shí)現(xiàn)文件上傳
最原始,、最簡單,、最粗暴的文件上傳。
前端代碼：
//方式1
<form action="/Home/SaveFile1" method="post" enctype="multipart/form-data">
<input type="file" class="file1" name="file1" />
<button type="submit" class="but1">上傳</button>
</form>
【注意】
- 1,、需要post提交
- 2,、enctype="multipart/form-data" （傳輸文件）
- 3、需要提交的表單元素需要設(shè)置 name 屬性
后臺代碼：
public ActionResult SaveFile1()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Request.Files[0].FileName);
return Content("保存成功");
}
return Content("沒有讀到文件");
}
表單異步上傳（jquery.form插件）
雖然上面的方式簡單粗暴,，但是不夠友好,。頁面必然會刷新。難以實(shí)現(xiàn)停留在當(dāng)前頁面,，并給出文件上傳成功的提示,。
隨著時(shí)間的流逝，技術(shù)日新月異,。ajax的出現(xiàn),，使得異步文件提交變得更加容易。
下面我們利用jquery.form插件來實(shí)現(xiàn)文件的異步上傳,。
首先我們需要導(dǎo)入jquery.js和jquery.form.js
前端代碼：
<form id="form2" action="/Home/SaveFile2" method="post" enctype="multipart/form-data">
<input type="file" class="file1" name="file1" />
<button type="submit" class="but1">上傳1</button>
<button type="button" class="but2">上傳2</button>
</form>
//方式2（通過ajaxForm綁定ajax操作）
$(function () {
$('#form2').ajaxForm({
success: function (responseText) {
alert(responseText);
}
});
});
//方式3（通過ajaxSubmit直接執(zhí)行ajax操作）
$(function () {
$(".but2").click(function () {
$('#form2').ajaxSubmit({
success: function (responseText) {
alert(responseText);
}
});
});
});
后臺代碼：
public string SaveFile2()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
原理：
我們很多時(shí)候使用了插件,，就不管其他三七二十一呢。
如果有點(diǎn)好奇心,，想想這個(gè)插件是怎么實(shí)現(xiàn)的,。隨便看了看源碼一千五百多行。我的媽呀,，不就是個(gè)異步上傳嗎,，怎么這么復(fù)雜。
難以看出個(gè)什么鬼來,，直接斷點(diǎn)調(diào)試下吧,。
原來插件內(nèi)部有iframe和FormData不同方式來上傳，來適應(yīng)更多版本瀏覽器,。
模擬表單數(shù)據(jù)上傳（FormData）
iframe這東西太惡心,。我們看到上面可以利用FormData來上傳文件，這個(gè)是Html 5 才有的,。下面我們自己也來試試把,。
前端代碼：
<input id="fileinfo" type="file" class="notFormFile" />
<button type="button" class="btnNotForm">上傳4</button>
//方式4
$(".btnNotForm").click(function () {
var formData = new FormData();//初始化一個(gè)FormData對象
formData.append("files", $(".notFormFile")[0].files[0]);//將文件塞入FormData
$.ajax({
url: "/Home/SaveFile2",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
});
后的代碼：（不變，還是上例代碼）
public string SaveFile2()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
我們看到,，F(xiàn)ormData對象也只是在模擬一個(gè)原始的表單格式的數(shù)據(jù)。那有沒有可能不利用表單或表單格式來上傳文件呢,？答案是肯定的,。（下面馬上揭曉）
前端代碼：
<input type="file" id="file5" multiple>
<button type="button" class="btnFile5">上傳5</button>
//方式5
$(".btnFile5").click(function () {
$.ajax({
url: "/Home/SaveFile4",
type: "POST",
data: $("#file5")[0].files[0],
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});;
});
后臺代碼：
public string SaveFile4()
{
//這里發(fā)現(xiàn)只能得到一個(gè)網(wǎng)絡(luò)流，沒有其他信息了,。（比如,，文件大小、文件格式、文件名等）
Request.SaveAs(Server.MapPath("~/App_Data/SaveFile4.data") + "", false);
return "保存成功";
}
細(xì)心的你發(fā)現(xiàn)沒有了表單格式,，我們除了可以上傳文件流數(shù)據(jù)外,，不能再告訴后臺其他信息了（如文件格式）。
到這里,，我似乎明白了以前上傳文件為什么非得要用個(gè)form包起來,，原來這只是和后臺約定的一個(gè)傳輸格式而已。
其實(shí)我們單純的用jq的ajax傳輸文本數(shù)據(jù)的時(shí)候,，最后也是組裝成了form格式的數(shù)據(jù),，如：
$.ajax({
data: { "userName": "張三" }
分片上傳
在知道了上面的各種上傳之后，我們是不是就滿于現(xiàn)狀了呢,？no,，很多時(shí)候我們需要傳輸大文件，一般服務(wù)器都會有一定的大小限制,。
某天,，你發(fā)現(xiàn)了一個(gè)激情小電影想要分享個(gè)大家。無奈,，高清文件太大傳不了,，怎么辦？我們可以化整為零,，一部分一部分的傳嘛,，也就是所謂的分片上傳。
前端代碼：
<input type="file" id="file6" multiple>
<button type="button" class="btnFile6">分片上傳6</button>
<div class="result"></div>
//方式6
$(".btnFile6").click(function () {
var upload = function (file, skip) {
var formData = new FormData();//初始化一個(gè)FormData對象
var blockSize = 1000000;//每塊的大小
var nextSize = Math.min((skip + 1) * blockSize, file.size);//讀取到結(jié)束位置
var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 塊
formData.append("file", fileData);//將 部分文件 塞入FormData
formData.append("fileName", file.name);//保存文件名字
$.ajax({
url: "/Home/SaveFile6",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭
success: function (responseText) {
$(".result").html("已經(jīng)上傳了" + (skip + 1) + "塊文件");
if (file.size <= nextSize) {//如果上傳完成,，則跳出繼續(xù)上傳
alert("上傳完成");
return;
}
upload(file, ++skip);//遞歸調(diào)用
}
});
};
var file = $("#file6")[0].files[0];
upload(file, 0);
});
后臺代碼：
public string SaveFile6()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];
//創(chuàng)建一個(gè)追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉(zhuǎn)成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
相對而言,，代碼量多了一點(diǎn)，復(fù)雜了一點(diǎn),。不過相對于網(wǎng)上的其他分片上傳的代碼應(yīng)該要簡單得多（因?yàn)檫@里沒有考慮多文件塊同時(shí)上傳,、斷點(diǎn)續(xù)傳。那樣就需要在后臺把文件塊排序,，然后上傳完成按序合并,，然后刪除原來的臨時(shí)文件。有興趣的同學(xué)可以自己試試,，稍候在分析上傳插件webuploader的時(shí)候也會實(shí)現(xiàn)）,。
效果圖：
【說明】：如果我們想要上傳多個(gè)文件怎么辦？其實(shí)H5中也提供了非常簡單的方式,。直接在input里面標(biāo)記multiple,，<input type="file" id="file6" multiple>，然后我們后臺接收的也是一個(gè)數(shù)組Request.Files,。
使用HTML5 拖拽,、粘貼上傳
只能說H5真是強(qiáng)大啊,，權(quán)限越來越大，操作越來越牛逼,。
前端代碼（拖拽上傳）：
<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="請將文件拖拽或直接粘貼到這里"></textarea>
//方式7
$(".divFile7")[0].ondrop = function (event) {
event.preventDefault();//不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作
var files = event.dataTransfer.files;//獲取拖上來的文件
//以下代碼不變
var formData = new FormData();//初始化一個(gè)FormData對象
formData.append("files", files[0]);//將文件塞入FormData
$.ajax({
url: "/Home/SaveFile2",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
};
后臺代碼：
略（和之前的SaveFile2一樣）
前端代碼（粘貼上傳 限圖片格式）：
//方式8
$(".divFile7")[0].onpaste = function (event) {
event.preventDefault();//不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作
var clipboard = event.clipboardData.items[0];//剪貼板數(shù)據(jù)
if (clipboard.kind == 'file' || clipboard.type.indexOf('image') > -1) {//判斷是圖片格式
var imageFile = clipboard.getAsFile();//獲取文件
//以下代碼不變
var formData = new FormData;
formData.append('files', imageFile);
formData.append('fileName', "temp.png");//這里給文件命個(gè)名（或者直接在后臺保存的時(shí)候命名）
$.ajax({
url: "/Home/SaveFile8",
type: "POST",
data: formData,
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭
success: function (responseText) {
alert(responseText);
}
});
}
};
后臺代碼：
public string SaveFile8()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(filePath);
return "保存成功";
}
return "沒有讀到文件";
}
效果圖：
上傳插件（WebUploader）
已經(jīng)列舉分析了多種上傳文件的方式,，我想總有一種適合你。不過,，上傳這個(gè)功能比較通用,，而我們自己寫的可能好多情況沒有考慮到。接下來簡單介紹下百度的WebUploader插件,。
比起我們自己寫的簡單上傳,，它的優(yōu)勢：穩(wěn)定、兼容性好（有flash切換,，所以支持IE）,、功能多、并發(fā)上傳,、斷點(diǎn)續(xù)傳（主要還是靠后臺配合）,。
官網(wǎng)：http://fex.baidu.com/webuploader/
插件下載：https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
下面開始對WebUploader的使用
第一種，簡單粗暴
前端代碼：
<div id="picker">選擇文件</div>
<button id="ctlBtn" class="btn btn-default">開始上傳</button>
<!--引用webuploader的js和css-->
<link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript">
var uploader = WebUploader.create({
// (如果是新瀏覽器 可以不用 flash)
//swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務(wù)端,。
server: '/Webuploader/SaveFile',
// 選擇文件的按鈕,。可選,。
// 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建,，可能是input元素，也可能是flash.
pick: '#picker'
});
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
alert("上傳成功");
});
</script>
后臺代碼：
public string SaveFile()
{
if (Request.Files.Count > 0)
{
Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
return "保存成功";
}
return "沒有讀到文件";
}
第二種,，分片上傳,。和我們之前自己寫的效果差不多。
前端代碼：
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務(wù)端,。
server: '/Webuploader/SveFile2',
// 開起分片上傳,。
chunked: true,
//分片大小
chunkSize: 1000000,
//上傳并發(fā)數(shù)
threads: 1,
// 選擇文件的按鈕。
pick: '#picker'
});
// 點(diǎn)擊觸發(fā)上傳
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
alert("上傳成功");
});
后臺代碼：
public string SveFile2()
{
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName);
//創(chuàng)建一個(gè)追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉(zhuǎn)成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
我們看到了有個(gè)參數(shù)threads: 1上傳并發(fā)數(shù),，如果我們改成大于1會怎樣,？前端會同時(shí)發(fā)起多個(gè)文件片上傳。后臺就會報(bào)錯(cuò),，多個(gè)進(jìn)程同時(shí)操作一個(gè)文件,。
那如果我們想要多線程上傳怎么辦？改代碼吧（主要是后臺邏輯）,。
前端代碼：
//并發(fā)上傳（多線程上傳）
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服務(wù)端,。
server: '/Webuploader/SveFile3',
// 開起分片上傳。
chunked: true,
//分片大小
chunkSize: 1000000,
//上傳并發(fā)數(shù)
threads: 10,
// 選擇文件的按鈕,。
pick: '#picker'
});
// 點(diǎn)擊觸發(fā)上傳
$("#ctlBtn").click(function () {
uploader.upload();
});
uploader.on('uploadSuccess', function (file) {
//上傳完成后,，給后臺發(fā)送一個(gè)合并文件的命令
$.ajax({
url: "/Webuploader/FileMerge",
data: { "fileName": file.name },
type: "post",
success: function () {
alert("上傳成功");
}
});
});
后臺代碼：
public string SveFile3()
{
var chunk = Request.Form["chunk"];//當(dāng)前是第多少片
var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(Request.Files
if (!Directory.Exists(path))//判斷是否存在此路徑，如果不存在則創(chuàng)建
{
Directory.CreateDirectory(path);
}
//保存文件到根目錄 App_Data + 獲取文件名稱和格式
var filePath = path + "/" + chunk;
//創(chuàng)建一個(gè)追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
//讀取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//將文件留轉(zhuǎn)成字節(jié)數(shù)組
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//將字節(jié)數(shù)組追加到文件
bw.Write(bytes);
}
}
return "保存成功";
}
/// <summary>
/// 合并文件
/// </summary>
/// <param name="path"></param>
/// <returns></returns>
public bool FileMerge()
{
var fileName = Request.Form["fileName"];
var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(fileName);
//這里排序一定要正確,，轉(zhuǎn)成數(shù)字后排序（字符串會按1 10 11排序,，默認(rèn)10比2小）
foreach (var filePath in Directory.GetFiles(path).OrderBy(t => int.Parse(Path.GetFileNameWithoutExtension(t))))
{
using (FileStream fs = new FileStream(Server.MapPath("~/App_Data/") + fileName, FileMode.Append, FileAccess.Write))
{
byte[] bytes = System.IO.File.ReadAllBytes(filePath);//讀取文件到字節(jié)數(shù)組
fs.Write(bytes, 0, bytes.Length);//寫入文件
}
System.IO.File.Delete(filePath);
}
Directory.Delete(path);
return true;
}
到這里你以為就結(jié)束了嗎,？錯(cuò),，還有好多情況沒有考慮到。如果多個(gè)用戶上傳的文件名字一樣會怎樣,？如何實(shí)現(xiàn)斷點(diǎn)續(xù)傳,？還沒實(shí)現(xiàn)選擇多個(gè)文件？不過,，這里不打算繼續(xù)貼代碼了（再貼下去,，代碼量越來越多了），自己也來練習(xí)練習(xí)吧,。
提供一個(gè)思路,，上傳前先往數(shù)據(jù)庫插入一條數(shù)據(jù)。數(shù)據(jù)包含文件要存的路徑,、文件名（用GUID命名,，防止同名文件沖突）、文件MD5（用來識別下次續(xù)傳和秒傳）,、臨時(shí)文件塊存放路徑,、文件是否完整上傳成功等信息。
然后如果我們斷網(wǎng)后再傳,，首先獲取文件MD5值,，看數(shù)據(jù)庫里面有沒上傳完成的文件，如果有就實(shí)現(xiàn)秒傳,。如果沒有,，看是不是有上傳了部分的。如果有接著傳,，如果沒有則重新傳一個(gè)新的文件,。
總結(jié)
之前我一直很疑惑，為什么上傳文件一定要用form包起來,，現(xiàn)在算是大概明白了,。
最開始在javascript還不流行時(shí)，我們就可以直接使用submit按鈕提交表單數(shù)據(jù)了,。表單里面可以包含文字和文件,。然后隨著js和ajax的流行，可以利用ajax直接異步提交部分表單數(shù)據(jù),。這里開始我就糾結(jié)了,，為什么ajax可以提交自己組裝的數(shù)據(jù),。那為什么不能直接提交文件呢。這里我錯(cuò)了,，ajax提交的并不是隨意的數(shù)據(jù),，最后還是組裝成了表單格式（因?yàn)楹笈_技術(shù)對表單格式數(shù)據(jù)的支持比較普及）。但是現(xiàn)有的技術(shù)還不能通過js組裝一個(gè)文件格式的表單數(shù)據(jù),。直到H5中的FormData出現(xiàn),，讓前端js組裝一個(gè)包含文件的表單格式數(shù)據(jù)成為了可能。所以說表單只是為了滿足和后臺“約定”的數(shù)據(jù)格式而已,。
相關(guān)推薦
demo
|
