在传统式的HTTP运用提交文档要想另外提交好几个文档并查询提交进度是1件很不便的事儿,自然如今也是有1些根据SWF的文档提交组件出示这类的便捷性.到了HTML5下对文档的载入和提交的操纵层面就十分灵便,HTML5出示1系列的AIP开展文档载入,包含计取文档某1块的內容也十分便捷,融合Websocket开展文档的传送就变得更为便捷和灵便.下面根据应用HTML5融合websocet简易地完成多文档另外提交运用.
完成作用
大约预览1下必须做的作用:
关键作用是客户能够立即把文档夹的文档立即拖放到网页页面中,并开展提交,在提交的全过程中显示信息提交进度信息内容.
FileInfo类封裝
以便便捷载入文档信息内容,在原来File的基本封裝了1个简易文档信息内容载入的目标类.
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 < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary);
}
FileInfo.prototype.OnLoadData = function (evt) {
var obj = evt.target["tag"];
if (evt.target.readyState == FileReader.DONE) {
obj.DataBuffer = evt.target.result;
if (obj.LoadCallBack != null)
obj.LoadCallBack(obj);
}
else {
if (obj.UploadError != null)
obj.UploadError(fi, evt.target.error);
}
}
FileInfo.prototype.Load = function (completed) {
this.LoadCallBack = completed;
if (this.filereader == null || this.filereader == undefined)
this.filereader = new FileReader();
var reader = this.filereader;
reader["tag"] = this;
reader.onloadend = this.OnLoadData;
var count = this.Size - this.PageIndex * this.PageSize;
if (count > 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.Pages) {
file.Load(file.OnUploadData);
}
}
else {
if (file.UploadError != null)
file.UploadError(file, data.status);
}
});
}
FileInfo.prototype.Upload = function (channel, url) {
var fi = this;
channel.Send({ url: url, parameters: { FileName: fi.FileName, Size: fi.Size, FileID: fi.ID} }, function (result) {
if (result.status == null || result.status == undefined) {
fi._channel = channel;
fi._url = result.data;
fi.Load(fi.OnUploadData);
}
else {
if (file.UploadError != null)
file.UploadError(fi, result.status);
}
});
}
类的解决很简易,根据file原始化并特定分层尺寸来实始化1些文档信息内容,如页数量页尺寸等.自然最关键还封裝文档对应的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);
}
}
只必须在onDrop全过程中获得有关拖放文档便可,这些将会根据1些HTML5的实例教程能够获得协助。
这时候候只必须对于挑选的文档搭建有关FileInfo目标,并启用提交方式便可.
function onFileOpen(files) {
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
var info = new FileInfo(files[i], 32768);
uploads.push(info);
info.UploadProcess = onUploadProcess;
addUploadItem(info);
}
}
}
根据UploadProcess恶性事件对提交文档进度信息内容开展1个设定升级
function onUploadProcess(file) {
$('#p_' + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,
text: file.FileName + '[' + file.UploadBytes + '/' + file.Size + ']'
});
}
C#服务端
依靠于Beetle对websocket的适用对应服务端完成就十分简易了
/// <summary>
/// Copyright © henryfan 2012
///CreateTime: 2012/12/14 21:13:34
/// </summary>
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";
}
}
服务端方式有两个1个是提交文档恳求,和1个提交文档块接受方式.
总结
只必须以上简易的编码就可以完成多文档另外提交作用,在这选用json来解决提交的信息内容,因此文档流要开展1个base64的编号解决,因为websocket访问递交的数据信息1般都有MASK解决再再加base64那消耗相对性来讲较为重,具体上websocket有出示流的数据信息包文件格式(arraybuffer);自然这类解决在实际操作上就沒有json来得便捷简易.
免费下载编码:WebSocketUpload.rar
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。