快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际官方app下载安卓版_酒文化网进入



在传统的HTTP利用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的工作,当然现在也有一些基于SWF的文件上传组件供给这种的便利性.到了HTML5下对文件的读取和上传的节制方面就异常机动,HTML5供给一系列的AIP进行文件读取,包括计取文件某一块的内容也异常方便,结合Websocket进行文件的传输就变得加倍方便和机动.下面经由过程应用HTML5结合websocet简单地实现多文件同时上传利用.

实现功能

大年夜概预览一下必要做的功能:

主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的历程中显示上传进度信息.

FileInfo类封装

为了方便读取文件信息,在原有File的根基封装了一个简单文件信息读取的工具类.

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) 伟德国际官方app下载安卓版> 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

binary += String.fromCharCode(bytes[i])

}

return window.btoa(bina伟德国际官方app下载安卓版ry);

}

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 (r伟德国际官方app下载安卓版esult) {

if (result.status == null || result.status == undefined) {

file.PageIndex++;

if (file.UploadProcess != null)

file.UploadProcess(file);

if (file.PageIndex

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初始化并指定分块大年夜小来实始化一些文件信息,如页数量页大年夜小等.当然最紧张还封装文件对应的Upload措施,用于把文件块信息打包成base64信息经由过程Websocket的要领发送到办事器.

文件拖放

在HTML5中吸收系统文件拖放进来并不必要做繁杂的工作,只必要针对容器元素绑定相关事故即可.

function onDragEnter(e) {

e.stopPropagation();

e.preventDefault();

}

function onDragOver(e) {

e.stopPropagation();

e.preventDefault();

$(dropbox).伟德国际官方app下载安卓版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历程中获取相关拖放文件即可,这些可能经由过程一些HTML5的教程可以获得赞助,具体看http://www.html5rocks.com/zh/tutorials/file/dndfiles/

这时刻只必要针对选择的文件构建相关FileInfo工具,并调用上传措施即可.

function onFileOpen(files) {

if (files.length > 0) {

for (var i = 0; i

var info = new FileInfo(files[i], 32768);

uploads.push(info);

info.UploadProcess = onUploadProcess;

addUploadItem(info);

}

}

}

经由过程UploadProcess事故对上传文件进度信息进行一个设置更新

function onUploadProcess(file) {

$('#p_' + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,

text: file.FileName + '[' + file.UploadBytes + '/' + file.Size + ']'

});

}

C#办事端

借助于Beetle对websocket的支持对应办事真个实现就异常简单了

///

/// Copyright © henryfan 2012

///Email:henryfan@msn.com

///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";

}

}

办事端措施有两个一个是上传文件哀求,和一个上传文件块接管措施.

总结

只必要以上简单的代码就能实现多文件同时上传功能,在这采纳json来处置惩罚上传的信息,以是文件流要进行一个base64的编码处置惩罚,因为websocket浏览提交的数据一样平常都有MASK处置惩罚再加上base64那损耗相对来说对照重,实际上websocket有供给流的数据包款式(arraybuffer);当然这种处置惩罚在操作上就没有js伟德国际官方app下载安卓版on来得方便简单.

下载代码:WebSocketUpload.rar (642.65 kb)

演示地址:http://html5.ikende.com/upload.htm 应用chrome或IE10浏览器

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: