html文件切片上传之JS对大文件进行切片

2016年12月14日23:33:56 发表评论 1,113
摘要

本文介绍一款JavaScript分片上传插件,通过js对要上传的文件进行切片上传,解决文件过大无法上传的问题。

html文件切片上传之JS对大文件进行切片

参加齐鲁软件设计打扫的时候,在用户上传文件那块遇到了很大的难度,因为用户需要上传视频等大文件,所以html自身的file标签就不能再使用了,于是在网上看了很多办法,最后选择了一个分片上传的插件plupload,那为什么要使用切片上传?什么是切片上传呢?

为什么要使用切片上传:

1、后台脚本的运行时间是有限制的,超过脚本的运行时间但文件未上传完成会造成文件上传失败。

2、后台接收文件的时候是要消耗服务器的内存的,长时间传输同一个文件会消耗掉服务器大量的内存,严重的甚至造成服务器崩溃。

切片上传的概念及基本原理:

切片上传是从htm5开始兴起的,他可以利用js的slice(star,end);方法对获取的文件进行数据截取,就是可以获取到文件某一部分的数据,有了这个东西之后,只要定义好每一片的文件大小,就可以将这一个大文件进行切片,每次只传输一片文件,这样就可以分片对文件进行传输,当然,有切片就要有组合,这时候普通的后台接收文件的方法就不适用了,具体的接收原理下面再补充。

主要JS代码:

使用方法:

本程序首先是基于JQuery的,所以使用之前务必提前引入jquery.js,然后只需要新建一个对象并进行参数配置即可。

程序实现说明:

程序基于参数对将要上传的文件进行配置,在JavaScript中新建FormData()对象,将获取到的input文件信息填充到FormData中,然后基于JavaScript的XMLHttpRequest();对文件进行静态的上传。可能有人会问,上面既然说了使用了JQ框架,为什么还要使用XHR却不使用$.ajax(),在这里我说明一下,其实我刚开始写的时候是用了JQ的ajax,但是后来我有使用了JS原生的ajax,在本程序中,JQ只起到获取元素和获取元素属性的作用,确实未使用其ajax功能,原因就是JQ的ajax不能实现onprocess的功能,即不能获取文件上传的实时情况,也就意味着无法显示文件的上传进度,所以还是不用框架的ajax了吧。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: