通过前面两篇的分享,我们已经搞定了单个文件的普通的上传,包括文件预览,图片预览,上传速度等前端界面的显示,这次我们来谈谈关于>XMLHttpRequest2.0在界面之后假如才用分片上传能做到一些什么功能

关于分片上传

为什么要使用分片上传?

考虑如下场景,假如用户需要在一个视频分享社区上传一部.avi的视频文件进行分享,大小在2G以上,这个时候用户假如在上传的过程当中,发生了宽带掉线,不小心关闭了浏览器等这种意外的事情,用户这个时候除了重传整个文件以外,没有其他更好的选择,可能用户就不会考虑再次进行上传了,这个社区因此可能就这么丢掉了一个优质用户。假如才用分片上传则可以有效的避免这个问题。另外大量的第三方云存储实际上也是有做接受的文件大小限制的。

什么是分片上传?

分片上传的意思实际上就是把一个大文件进行分割,一个视频文件就好比是一个非常大的数组文件,分片就是把这个数组分割成N个小的数组,我们把分片之后的小文件一个个的上传到服务器,服务器在对分片的文件进行重组,从而得到一个完整的视频文件。

分片上传的优势

采用文件分片上传,有哪些优势呢?

  • 更强的容错能力

    采用分片上传可以大大减少重传的情况,把一个大文件进行分片上传之后就算当前这个分片在上传的过程中出现了什么意外,用户也只需要重新上传当前的这个分片,而不用将整个文件进行上传。

  • 可以模拟出暂停和继续功能

    使用了分片上传,当用户点击暂停的时候终断当前这一片文件的上传,当用户点击继续的时候可以继续从当前上传的这一片文件开始上传

  • 可以断点续传

    使用分片上传后,当用户关闭电脑,下次在登录网页的时候我们可以通过把当前正在上传的分片的id以及通过对文件的md5的方式序列化文件得到唯一的key存在本地,用户打开上传页面就可以直接读取当前分片的位置继续进行上传。

  • 关于秒传

    我们既然能够通过对碎片文件进行MD5的序列化,那么我们是否还可以考虑对整个文件进行序列化,和服务器那边的文件进行对比,这样假如服务器那边已经存在了一个相同的文件,我们就可以直接实现秒传文件了。

怎么进行分片上传

分片上传这么多好处,那怎么进行分片上传呢?

function upload(){
var file=$("#file")[0].files[0],//文件对象
name=file.name, //文件名称
size=file.size, //文件大小
succeed=0; //可以用来计算进度的变量
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数 for(var i = 0;i < shardCount;++i){
//计算每一片的起始与结束位置 var start = i * shardSize,
end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start,end)); //file对象的slice方法用于切出文件的一部分 form.append("name", name); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 //Ajax提交 $.ajax({ url: "../File/Upload", type: "POST", data: form, //刚刚构建的form数据对象 async: true, //异步 processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function(){
//当前这一片上传成功显示进度
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
}); }
}

上面这些代码就可以简单的实现一个分片上传文件的前端处理了,当然还有许多东西需要做比如暂停,假如还需要进行多文件的分片上传,断点续传等等这么写,那还得继续写写写写很多这种低层的方法。这里推荐使用一个叫做Plupload的上传组件,这个组件很强大,有如下特点:

  1. 有多种上传方式,HTML5、flash、silverlight以及传统的input type=file,Plupload会自动检测当前的浏览器环境,切换到最合适的上传方式,
  2. 支持拖拽上传
  3. 支持前端的图片压缩
  4. 支持文件信息的读取
  5. 支持分片上传

通过Plupload我们就不需要关心上传过程中这些底层处理,只需要实例化Plupload对象就可以使用他给我们提供的各种事件,方法,属性等。

关于Plupload的具体使用方法可以参考 http://www.cnblogs.com/2050/p/3913184.html

HTML5关于上传API的一些使用(下)的更多相关文章

  1. HTML5关于上传API的一些使用(上)

    HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest ...

  2. HTML5关于上传API的一些使用(中)

    上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览.这次我们就讲下HTML5中关于上传的一些各种个性 ...

  3. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  4. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  5. HTML5文件上传还有进度条

    以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...

  6. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  7. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

  8. html5文件上传

    <!DOCTYPE html><html><head> <title>Html5 Ajax 上传文件</title></head> ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. Java内存溢出的详细解决方案(转http://developer.51cto.com/art/200906/129346.htm)

    一.内存溢出类型 1.java.lang.OutOfMemoryError: PermGen space JVM管理两种类型的内存,堆和非堆.堆是给开发人员用的上面说的就是,是在JVM启动时创建:非堆 ...

  2. source insight中{}自动缩进的调整

    默认的自动缩进非常难看,解决方法如下: 菜单栏 -> Options -> document options ->点击右侧的 “Auto Indent...”按钮 将右侧" ...

  3. profiler跟踪事件存为表之后性能分析工具

    使用profiler建立跟踪,将跟踪结果存到表中,使用下面存储过程执行 exec temp_profiler 'tra_tablename'对表数据进行处理归类,然后进行性能分析 1.先建存储过程 2 ...

  4. 让Sql Server 2008 可以远程连接的方法

    1.先开防火墙TCP:1433 2.设置外围端口为:1433 注意一定不要忘记“启用”和IPALL的端口设置 3.重启SQL完成 如果要查看1433端口有没有启用并被监听,只要在cmd里使用netst ...

  5. 关于视频YUV

    这里有一篇摘自MSDN的文章.介绍了YUV视频数据格式. About YUV Video Digital video is often encoded in a YUV format. This ar ...

  6. 转:简单通用的一则makefile .

    在linux下面下写程序少不了写makefile,如果每个文件都按部就班的详细的写编译脚本,效率势必低下:makefile提供了自动化变量.模式规则等,稍加利用可以提高写makefile的效率.下面列 ...

  7. CentOS连接网络注意事项

    连接网络,系统中这两个服务需要启动 可以看到右上角网络连接成功了

  8. 发现恶意ip大量访问 可使用命令进行封禁

    1. vim /etc/sysconfig/iptables 2.添加箭头指向的语句,ip可以替换, 3. 保存后退出 service iptables save 4.重启 service iptab ...

  9. 帧率(FPS)计算的六种方法总结

    原文地址:http://blog.csdn.net/u012494876/article/details/53368164 帧率(FPS)计算是游戏编程中常见的一个话题.大体来说,总共有如下六种方法: ...

  10. Redis总结(五)缓存雪崩和缓存穿透等问题(转载)

    前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhong/category/771056.html .今 ...