现在做网站开发，总是得涉及到上传文件这个麻烦事儿。尤其是要是一次上传好几个文件，真的够头疼的。不过，别急，我今儿就教你用HTML5和WebSocket技术，来轻轻松松搞定多文件同时上传，还能随时看到上传进程这样一来，客户用起来更方便了，咱们开发人员也能省下不少力气！
HTML5文件API的基本使用
HTML5有个超赞的API能搞定文件！它可以帮你读出文件的基本信息，比如名字和大小。最酷的是，这个API还能用在读取大文件里的特定内容上，非常实用。
HTML5的文件API真挺方便的，用着也不费劲儿。比如说，有个叫FileReader的东西，能让你异步读文件，哪怕是上传大型文件，都不用担心页面卡住。而且，它还有个拖放功能，你能直接把文件扔到网页上的指定位置，真的提高了不少用户的使用感受。
WebSocket的基本概念和工作原理
现在咱们来聊聊WebSocket这个东西。WebSocket就是让你用一个TCP连接实现双向的即时通讯！也就是说，只要连上了WebSocket，无论哪头想送数据给对方，立马就能收到，跟HTTP那种每传一次就要重新搞连接比起来，要方便多了哈。
WebSocket用得很广，特别是要即时沟通的地方。就像在线聊天啊、股票行情啥的。咱们这种大文件上传来讲，WebSocket就能让咱实时传文件，还能一直更新上传情况，而不是老套的HTTP上传那样。
FileInfo类的封装和使用
让我们弄个FileInfo类，好把文件信息搞得井井有条。它能包含像名字、体积、类型这种基础大料，还附带了读文件内容的小功能。
用FileInfo这个类包装一下代码，感觉就像变整洁多了似的。而且在后面的上传来处理这件事就容易许多。比如说，我们能用这个FileInfo对象轻松拿到文件的二进制数据，跟着就可以用WebSocket发到服务器去。这不就是让上传过程变得顺畅又高效。
function FileInfo(file, pagesize) {
this.Size = file.size;
this.File = file;
this.FileType = file.type;
this.FileName = file.name;
this.PageSize = pagesize;
this.PageIndex = 0;
this.Pages = 0;
this.UploadError = null;
this.UploadProcess = null;
this.DataBuffer = null;
this.UploadBytes = 0;
this.ID = Math.floor(Math.random() * 0x10000).toString(16);
this.LoadCallBack = null;
if (Math.floor(this.Size % this.PageSize) > 0) {
this.Pages = Math.floor((this.Size / this.PageSize)) + 1;
}
else {
this.Pages = Math.floor(this.Size / this.PageSize);
}
}
FileInfo.prototype.Reset = function () {
this.PageIndex = 0;
this.UploadBytes = 0;
}
FileInfo.prototype.toBase64String = function () {
var binary = ''
var bytes = new Uint8Array(this.DataBuffer)
var len = bytes.byteLength;
for (var i = 0; i this.PageSize)
count = this.PageSize;
this.UploadBytes += count;
var blob = this.File.slice(this.PageIndex * this.PageSize, this.PageIndex * this.PageSize + count);
reader.readAsArrayBuffer(blob);
};
FileInfo.prototype.OnUploadData = function (file) {
var channel = file._channel;
var url = file._url;
channel.Send({ url: url, parameters: { FileID: file.ID, PageIndex: file.PageIndex, Pages: file.Pages, Base64Data: file.toBase64String()} }, function (result) {
if (result.status == null || result.status == undefined) {
file.PageIndex++;
if (file.UploadProcess != null)
file.UploadProcess(file);
if (file.PageIndex 类的处理很简单,通过file初始化并指定分块大小来实始化一些文件信息,如页数量页大小等.当然最重要还封装文件对应的Upload方法,用于把文件块信息打包成base64信息通过Websocket的方式发送到服务器.
文件拖放
在HTML5中接受系统文件拖放进来并不需要做复杂的事情,只需要针对容器元素绑定相关事件即可.
function onDragEnter(e) {
e.stopPropagation();
e.preventDefault();
}
function onDragOver(e) {
e.stopPropagation();
e.preventDefault();
$(dropbox).addClass('rounded');
}
function onDragLeave(e) {
e.stopPropagation();
e.preventDefault();
$(dropbox).removeClass('rounded');
}
function onDrop(e) {
e.stopPropagation();
e.preventDefault();
$(dropbox).removeClass('rounded');
var readFileSize = 0;
var files = e.dataTransfer.files;
if (files.length > 0) {
onFileOpen(files);
}
}
C服务端的实现
服务器端用C#搞WebSocket连接，还能管理文件上传！C#有各种好用的库和API，弄个WebSocket服务器比玩儿似的还简单。
服务端的活儿就是接收到客户端传来的文件数据，然后给它存起来。咱们弄俩方法，一个管上传请求，一个管接文件块和存起来。就算文件大得很，分着传也不怕内存不够用。
上传进度显示的实现
function onFileOpen(files) {
if (files.length > 0) {
for (var i = 0; i 通过UploadProcess事件对上传文件进度信息进行一个设置更新
function onUploadProcess(file) {
$('#p_' + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,
text: file.FileName + '[' + file.UploadBytes + '/' + file.Size + ']'
});
}
传文件时候告诉大家进展很关键！这样大家就知道哪个文件还在传送中，不会因为等待太久却没结果而烦躁了。
想要搞个上传进度条真不难。首先，让客户端的JavaScript瞅着WebSocket上传来的信息，然后把这个进度传到进度条上。服务器那边儿，用C#记下每个收到的文件块有多大，再经过WebSocket立刻发给客户端就成了。
文件上传的优化策略
尽管现在能同时传多个文件并查看进度了，但还是有办法提高效率的。
比如，用Base64给文件加密省事儿多了，不过要记住这玩意儿能让数据超量，所以还要记得压缩！还有个好东西是WebSocket能用上ArrayBuffer这货，直接传二进制的，快得飞起。
///
/// Copyright © henryfan 2012
///CreateTime: 2012/12/14 21:13:34
///
public class Handler
{
public void UploadPackage(string FileID, int PageIndex, int Pages, string Base64Data)
{
Console.WriteLine("FileID:{2},PageIndex:{0} Pages:{1} DataLength:{3}", PageIndex, Pages, FileID,Base64Data.Length);
}
public string UploadFile(string FileID, string FileName, long Size)
{
Console.WriteLine("FileID:{2},FileName:{0} Size:{1}", FileName, Size, FileID);
return "Handler.UploadPackage";
}
}
实战案例分析
最后，咱们来看看实战例子！这种方案就是你能直接把电脑里的文件夹拖到网页上再传上去，而且网页还会告诉你每份文件传了多少。
来看看，这就是用HTML5和WebSocket搞定多个文件上传的案例！你看这不只是搞些什么高大上的功能，而且还让用户感觉超棒！
听我说用上HTML5跟WebSocket，我们就能同时上传多个文件了，而且还能实时看上传进度，这样不就既提高效率又增加用户体验？希望这篇小文对你有所启发和帮助哟~
说到项目中的文件上传，大家有过困扰吗？是怎么解决的？来，都来说说，别忘了点个赞分享一下~
原文链接：https://www.icz.com/technicalinformation/web/2024/06/18507.html，转载请注明出处~~~ 
评论0