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

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

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

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

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

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

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

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

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

根本不需要那么麻烦，装一个扩展就实现了，代码都不用写。

AetherUpload-Laravel提供超大文件上传的Laravel扩展包，支持分组配置、断线续传、秒传等功能，简单易用，满足多数人的主流需求，无需编写适配代码，几乎开箱即用。

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(function(){

...接上部分

var box = document.getElementById('drop_area')//拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault()//取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files//获取文件对象

//检测是否是拖拽文件到页面的 *** 作

if(fileList.length == 0){

return false

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片！")

return false

}

//拖拉图片到浏览器，可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0])

var filename = fileList[0].name//图片名称

var filesize = Math.floor((fileList[0].size)/1024)

if(filesize>500){

alert("上传大小不能超过500K.")

return false

}

var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>"

$("#preview").html(str)

//上传

xhr = new XMLHttpRequest()

xhr.open("post", "upload.php", true)

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")

var fd = new FormData()

fd.append('mypic', fileList[0])

xhr.send(fd)

},false)

})

---