再说说文件上传客户端的问题。阮一峰大神这篇解释挺清楚文件上传的渐进式增强。所以原理就不再赘述,就在这记录下实现的方法。
form表单上传
form表单上传是最简单的文件上传,只需要一个form标签,把enctype设为multipart/form-data。action设置为上传路径。缺点是提交后会跳转。基本不会再用。
1 | <form enctype="multipart/form-data" method="POST"> |
利用iframe的form表单提交
把form表单的action值指向一个同页面隐藏的iframe。此方法页面不会跳转,也不会阻塞页面(传统form上传是同步上传),甚至可以获取到服务器的返回信息。
ajax上传
ajax上传是现在的主流方法,但是只能兼容IE10以上的高级浏览器。IE8呵呵
1 | //一份完整的请求示例 |
有几点需要注意的。
- 文件上传需要用到FormData对象来包装文件,模拟表单提交
1 | var formData = new FormData(); |
- 用
append
方法给formData
添加数据。 dom.files[index]
方法来获取input标签内的文件数据。- console.log(dom.files[index])也许打印出来的内容看起来是个普通的对象,好像并没有包含文件内容。但是事实上这样的确可以把文件上传上去。
用jQuery上传。有两个参数是必须的:
processData: false
和contentType: false;
processData设置为false。因为data值是FormData对象,不需要对数据做处理。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
contentType设置为false。因为是由form表单构造的FormData对象,且已经声明了属性enctype=”multipart/form-data”,所以这里设置为false。发送信息至服务器时内容编码类型。默认值是”application/x-www-form-urlencoded; charset=UTF-8”,适合大多数情况。
cache设置为false,上传文件不需要缓存。
ajax进度条
一切要说的话都在代码里
1 | // jQuery |
原生的方法,需要在new一个xhr对象和open、send之间给xhr.upload绑定progress事件即可。
1 | // 摘抄自网络,未验证 |
拖拽方法封装
拖拽方法相关的事件有 dragenter、dragleave、dragover、drop。一般情况下都要配合起来用才能完成一次完整的退拽操作
需要说明的有几点:
1、 可以读取到文件路径和文件内容的事件对象在drop事件下。
2、 如果在绑定拖拽方法的对象下还有子元素,鼠标进入该子元素范围内也会触发dragleave、dragenter、dragover等事件。所以会导致一些奇怪的事情,比如提前移除高亮样式等。解决办法是添加一个计数器。当dragleave次数等于dragenter次数就可以触发真正的dragleave回调。
1 | //初始化拖拽方法。只是要获取文件路径不需要readFile API |