[C#][ASP.net] 使用 FileReader.readAsArrayBuffer 做到多檔上傳
2013-05-27
上傳多檔的解決方法很多，不管是用Flash 或是啥技術，都是可以做到多檔上傳，
套件也是超級的多，今天做一個很簡單的範例 其中使用到HTML5 File API 的部分，參考網址:http://www.w3.org/TR/FileAPI/
因為檔案上傳，還包含Server端的程式撰寫，網路上較多關於PHP 方法，目前我會用到ASP.net 部分，所以就筆記一下，
當然這很簡陋，改良空間也很大，但是需要的人可以繼續改寫下去..
文章案例，是需要做一個多檔圖片上傳功能.
首先，我們看看 Server 端的部分，我們建立一個upload.ashx 來負責收檔案下來存取..
這隻程式很簡單，需要傳一個參數近來 就是filename
這然這點你之後可以改寫，這樣的話收到的檔案預設就會存到
/images/[filename].jpg
using System;using System.IO;using System.Web;namespace TestMutiUpload{ /// <summary> /// Summary description for upload /// </summary>public class upload : IHttpHandler
{public void ProcessRequest(HttpContext context)
{ //如果沒有回傳指定檔名就回傳錯誤if (string.IsNullOrEmpty(context.Request["filename"]))
{ context.Response.Write("error:filename"); return;}
//暫存在images檔案夾下面，如果沒有此檔案夾就建立if (!Directory.Exists(AppDomain.CurrentDomain.BaseDirectory + "images\\"))
{ Directory.CreateDirectory(AppDomain.CurrentDomain.BaseDirectory + "images\\");}
//寫入檔案
File.WriteAllBytes(AppDomain.CurrentDomain.BaseDirectory + "images\\" + context.Request["filename"] + ".jpg", StreamToBytes(context.Request.InputStream));
//回傳寫入的檔名
context.Response.Write(context.Request["filename"]);}
/// <summary>
/// 將Stream 轉成 Byte[]
/// </summary>
/// <param name="stream"></param>
/// <returns></returns>private byte[] StreamToBytes(Stream stream)
{stream.Position = 0;
var buffer = new byte[stream.Length];
for (int totalBytesCopied = 0; totalBytesCopied < stream.Length; )
totalBytesCopied += stream.Read(buffer, totalBytesCopied, Convert.ToInt32(stream.Length) - totalBytesCopied);
return buffer;}
public bool IsReusable
{get
{return false;
}
}
}
}
再來，我們來看HTML的部分
<input type="file" multiple="multiple" id="input_chooseFiles" data-id="fileUpload" />
<div id="div_Result"></div>
一個id 為 input_chooseFiles 的 input 負責做選取圖片們(多檔)，之後上傳成功後會將結果append 到 div_Result 之中
javascript 部分:
<script>
//產生隨機檔名 //如果有特別需求可以改寫成從Server去取 function GetGUID() {var res = '';
for (var i = 1; i <= 8; i++) {
res += Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return res;};
//將以上傳的append 到顯示結果的DIV function ShowImage(filename) {$('#div_Result').append("<img src='/images/" + filename + ".jpg' style='width:100px' />");
}
//透過AJAX POST 到upload.ashx function SendFileToServer(filename, filecontent) { $.ajax({ type: "POST", url: "/upload.ashx?filename=" + filename, dataType: 'text', cache: false, processData: false,data: filecontent,
success: function (data) {ShowImage(data);
}
});
}
$('#input_chooseFiles').change(function (evt) {
if (evt.target.files.length > 0) {for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var reader = new window.FileReader();
reader.onload = function (rResult) { var filename = GetGUID();SendFileToServer(filename, rResult.target.result);
};
reader.readAsArrayBuffer(file);
};
}
});
</script>
結果:
測試過 IE10 , Waterfox , Chrome 都正常
下面有檔案，可以自行改寫，有任何問題或建議，在跟我說搂..