JavaScript⽂件上传详解
本⽂为 Qunar 技术沙龙投稿，版权归原作者所有，未经允许，请勿转载。
原⽂地址：
前端vue介绍
二进制转八进制例题作者：梁志，2015年加⼊ Qunar，⽬前在去哪⼉⽹⼤住宿 UED 中⼼担任前端⼯程师，喜欢捣⿎操作系统、系统⼯具，擅长分析开源程序和⽹络协议。
技术之路，共同进步，欢迎投稿、给⽂章纠错，请发送邮件⾄，或加 tree-rain-chen。
写在前⾯
本教程包含7个 Demo，它们循序渐进、由浅⼊深地讲解⽂件上传。每个 Demo 都被精⼼设计，都是可执⾏的。因为我刚做完并上线了⼀个真实的⽂件上传程序，所以有些 Demo 对实际⽣产有指导意义。
除了前端的上传部分，后端的接收部分也由我们⼀⼿操办，并且没有⽤现成的包⽽是亲⾃去解析数据，因为我想让你更清晰的看到 HTTP 协议。
在运⾏ Demo 的时候，请将⽹络速度调低，这样，我们就可以清楚地看到 http 的交互过程。
调低⽹络速度的⽅法之⼀，是⽤ Chrome 的 Debugger ⼯具，下⽂会有详细的图⽰。
下载zip⽂件，然后解压到c盘
c:\> cd javascript-file-upload-master
c:\> node demo1\server.js
linux or mac
$ git clone github/ktont/javascript-file-upload
$ cd javascript-file-upload
$ sudo node demo1/server.js
类推，运⾏demo2的时候，去执⾏demo2下的server.js。
$ sudo node demo2/server.js
然后在浏览器中(建议 Chrome)打开
ERROR: 如果你遇到 EADDRINUSE 的错误，那是因为80端⼝已经被其它诸如 apache、nginx 的进程占⽤了。
可以在启动的时候指定端⼝, ⽐如端⼝3000。
$ node demo1/server.js 3000
ERROR: 如果遇到 EACCES 的错误，请⽤ sudo 权限运⾏它。
$ sudo node demo1/server.jspython教程电子版下载
1. form 表单，原⽣⽂件上传⽅式
⾸先，来看第⼀个例⼦。它是⽤原⽣的⽂件提交⽅法，前端只有⼀段 HTML ⽽没有 JS。我们的⽬的是观察 http 协议。
前端 index.html，使⽤⼀个 input 标签进⾏⽂件选择，然后使⽤ form 表单发送数据。
后端 server.js，对表单发过来的数据进⾏解析，把协议格式打印出来。
点击“选择⽂件”后：
在点击 “Upload” 按钮之前，对⽹络进⾏限速，⽅便观察数据传输的过程。打开 Debugger“
点击后，选取⼀个较慢的：
服务端会打印下⾯的提⽰，注意红框中的 token，它⽤来表⽰⼆进制数据的边界。
可以调试它，⽤来学习 http 协议。
上传完成后：
TIP: 观察，它是我们本次学习之旅的主要⽅法。
jquery下载文件请求你⼀定要运⾏每个例⼦，看到它们运⾏，观察它们的⾏为。
这样，就熟悉了这个技术。
2. plupload 的原理
plupload 是⼀个⽂件上传的前端插件。
、
demo2 并没有使⽤ plupload，事实上它是⾃⼰实现了 plupload，它本⾝就相当于 plupload 的 v0.01 版本。
数据库原理及应用电子版教材通过 v0.01，这20⾏代码来⼀窥 plupload 的原理。⽽不是去读 plupload 的上万⾏代码，
真是，两岸猿声啼不住，轻⾈已过万重⼭，⼀⽇千⾥。
plupload 的原理，就是拿到⽂件句柄后，⾃⼰发送(XMLHttpRequest)⽂件。
尽量控制整个过程，从中加⼊⾃⼰实现的功能，这就是它的想法。
⽐如，图⽚预览，是在拿到⽂件以后在新的 canvas 上画出新的尺⼨。
⽐如，断点续传，是在拿到⽂件以后 slice ⽂件，从断点处开始读取。
android studio简单实例这些操作，都有个前提，就是要拿到⽂件。否则，⼀切⽆从做起。
3. mOxie⽂件选取和⽂件预览
这个例⼦没有服务端，请直接⽤浏览器打开 demo3/index.html。然后选取图⽚，就可以看到预览。
这样避免你想当然的认为，预览是服务端辅助的。
⽂件预览⼀般的做法是，先上传图⽚，然后从图⽚服务器上下载 thumbnail，这么做是有缺点的，预览要先上传才能看到（可能⼈们更喜欢先看到再决定要不要上传）。但是这⾥采⽤的做法不同，它在本地进⾏预览，但这势必会增加⼀些 cpu 的开销，因为预览的实质是进⾏了图⽚压缩（要么服务端压缩要么客户端压缩⽽已）。
实际⽣产中，采⽤哪⼀种做法，要看需求，或者看你⽅便的程度。如果需求中要求节省流量，或有上传前删除功能，那就采⽤本地预览（也就是本例的做法）。如果服务器能存储压缩后的 thumbnail，且压⼒不⼤，速度够快，那就⽤服务端预览。
另外，当你看到 mOxie 的时候，可能会觉得莫名其妙。是这样的：
打开
⽂档的最后⼀段话如下：
Low-level pollyfills (mOxie)
Plupload API
UI Widget
Queue Widget
其实我写本⽂的初衷，是为了解释这四句话。我跟你⼀样，⼀开始读不懂。这四句话的意思是: plupload 有四个安装等级 —— 初级，中级，⾼级，长级。
初级，叫 moxie.min.js，插件⼤⼩77k到106k不等（神马⿁？为什么不等的原因参见 ⼀节）。
其中提到的 pollyfills 应为 polyfills，是帮助⽼浏览器跟上 h5 步伐的插件，叫 h5 垫⽚，⽤ js 提升⽼浏览器的 api，抹平浏览器间的差异。所以 mOxie 其实是个通⽤前端库。
中级，plupload.full.min.js，插件⼤⼩123k
打开它看⼀下，发现它其实是 moxie.min.js 和⼀个叫 plupload.min.js 的⽂件合并到⼀起⽽已。
所以 plupload 其实是在 mOxie 的基础上，封装了⼀下⽂件上传 api，专业⽂件上传前端库。
⾼级，它依赖
jquery 137k
jquery ui 282k
plupload 123k
plupload ui 30k
⼀共约600k的⼤⼩。帮助你实现 UI，叫 widget － ⼩组件。
长级，它和⾼级差不多，也是实现⼀套 UI。区别是 UI 是队列，前者的 UI 是块和列表。
那么回过头，再来看这个例⼦。这个例⼦只是演⽰⽂件选择，它没有上传的功能。
只有⽂件选择功能的 mOxie 插件的⼤⼩为77k，⽐正常功能要⼩30%。为什么呢？
因为 mOxie 是⼀个可以⾃定义的前端库，如果有些功能不需要，⽐如 silverlight，那么就可以不把它们编到⽬标中。 参见
那么 mOxie 都做了什么呢，为甚么有77k这么⼤（⼤吗？）的体积。它提供⽂件预览功能、图⽚压缩功能、国际化⽀持（就是 i18n ）等。同时，上⾯也提到，它解决浏览器的兼容性问题。
4、mOxie⽂件上传，进度提⽰
这个例⼦只使⽤ mOxie 提供的功能，实现了⽂件上传。
$ ls -l demo[3-4]/moxie.min.js
-rw-r--r-- ktont  staff  7349913:53 demo3/moxie.min.js
-rw-r--r-- ktont  staff  7778213:58 demo4/moxie.min.js
您会发现，本例中的 mOxie 库⽐上⼀例多了4k，那是因为在编译的时候加⼊了 XMLHttpRequest 的⽀持。
所以 demo4 中的 moxie.min.js 就是 plupload 库能投⼊⽣产的最精简版本。参见

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。