前端上传大型文件或超长数据的解决办法

我们设计的上传文件大约在500m左右

我第一反应是blob，在HTML5中添加了blob类型用来定义前端较大数据，之前使用过blob流传输视频再使用html5中<video>标签读取blob流，所以blob可以作为这种文件传输的载体，那如何提交呢，使用可formdata提交blob数据，这种方式可以承受较大数据量的文件，但在使用formdata传输的过程中，浏览器会卡死，无法 *** 作。

还是舍友提醒，可采用数据分割的方式，一部分一部分上传。后经百度得知，文件分割要防止数据丢失进行大小校验，以及防止外部入侵，进行分段前端加密，后端校验。

百度发布了一款分割上传的组件web upload，可包含文件分割，大小校验等功能。

网站为： http://fex.baidu.com/webuploader/getting-started.html

佩服我们大学宿舍的技术氛围，出差回来的火车上跟大学舍友在微信上聊了两三个小时的技术，，，那天刚好是大学生开学那几天，路上好多大学生，好怀念自己的大学生活，好怀念与大学舍友谈天说地或技术探讨到深夜的日子

说了几个前端的问题，总结记录一下吧

其中只有一个我会的，，，先说这个问题，其他的我学习完再分享，留坑。。。。。。

1、用户上传文档后，把文档存储到某个路径下，然后在数据库中存储这个路径和文档名

2、用户上传文档后，进行二进制读取（流处理），然后把读取出来的二进制存储到数据库中

首先我们要进行读取文件

$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!")

然后把 $myfile 存储到mysql中

sql ="insert into table_name (fn) values($myfile)""

这样就把文档转变成二进制之后，存储到了mysql数据库，下次取出时，只需要把取出的数据存储到一个文档中

在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。

本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。

本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。

FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。

input 标签，将type设为file，之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于 *** 作二进制文件，arraybuffer用于 *** 作内存。

blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行 *** 作，下面是 *** 作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接，

FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有：

cavas压缩图片其实很简单，无非就是几个步骤：

1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；

2、用FileReader对象读取文件成base64,

3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；

4、将cavas转成blob，拼在formdata中用ajax上传。

这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。

---