Web文件上传常用方法总结

作者:课课家教育更新于： 2017-05-25 14:33:40

　　文件上传在WEB开发中应用很广泛，我们经常发微博、发微信朋友圈都用到了图片上传功能。

　　文件上传是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。

　　今天小编给大家聊聊常见的文件（图片）上传的方式和要点处理。

　文件上传在WEB开发中应用很广泛，我们经常发微博、发微信朋友圈都用到了图片上传功能。　　文件上传是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。　　今天小编给大家聊聊常见的文件（图片）上传的方式和要点处理。

　　一、表单上传

　　这是传统的form表单上传，使用form表单的input[type=”file”]控件，可以打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，它是web开发者最常用的一种文件上传方式。

　　表单的代码如下：

这是传统的form表单上传，使用form表单的input[type=”file”]控件，可以打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，它是web开发者最常用的一种文件上传方式。　　表单的代码如下：

　　以下是表单上传几个关键点：

　　1.method=”post”：采用post方式提交数据

　　2.enctype=”multipart/form-data”：采用multipart格式上传文件，此时request头会显示Content-Type:multipart/form-data;boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9

　　3.action：标明上传的服务端处理地址

　　4.type=”file”：使用input的file控件上传

　　5.如果是多文件批量上传，可以将input[type=”file”]的name属性设置为如：name=”file[]”

　　6.accept属性是HTML5的新属性，它规定了可通过文件上传提交的文件类型

　　7.上传的触发事件可以是：input[type=”file”]的onChange触发，也可以由一个独立的按钮的onClick使整个表单提交，此时还可以用input[type=”hidden”]带一些其它的参数，比如Token来源验证等等。

　　二、Ajax无刷新上传

　　Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果，不用像直接表单上传那样刷新和跳转页面。在这里，我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。

　　html代码片段如下：

　Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果，不用像直接表单上传那样刷新和跳转页面。在这里，我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。　　html代码片段如下：

　　javascript代码片段如下：

　　我们使用了file控件的change来触发上传事件，当然你也可以使用某个按钮来触发表单提交。提交数据时，我用到了FormData对象来发送二进制文件，FormData构造函数提供的append()方法，除了直接添加二进制文件还可以附带一些其它的参数，作为XMLHttpRequest实例的参数提交给服务端。

　　使用jQuery提供的ajax方法来发送二进制文件，还需要附加两个参数：

　　1.processData:false//不要对data参数进行序列化处理，默认为true

　　2.contentType:false//不要设置Content-Type请求头，因为文件数据是以multipart/form-data来编码

　　三、Flash上传

　　很多时候上传的需求要求显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，于是产生了使用Flash上传的方式，它采用Flash作为一个中间代理层，代替客户端跟服务端通信，此外，它也对客户端的文件选择方面拥有更多的控制权，比input[type=”file”]要大得多。

　　在这里小编使用了jQuery封装好的uploadify插件来进行演示，一般这类插件都自带了上传用的Flash文件，因为跟服务端回传的数据和展示跟客户端的交互，都是Flash文件的接口跟插件来对接的。

　在这里我使用了jQuery封装好的uploadify插件来进行演示，一般这类插件都自带了上传用的Flash文件，因为跟服务端回传的数据和展示跟客户端的交互，都是Flash文件的接口跟插件来对接的。

　　html部分很简单，预留一个hook后，插件会在这个节点内部创建Flash的object，并且还附带创建了上传进度、取消控件和多文件队列展示等界面。

　　html部分很简单，预留一个hook后，插件会在这个节点内部创建Flash的object，并且还附带创建了上传进度、取消控件和多文件队列展示等界面

　　值得注意的是flash并不适合手机端应用，更好的解决方案是使用flash+html5来解决平台的兼容性问题。

　　四、截图粘贴上传

　　我们发现现在有好多上传应用已经提供了截图粘贴上传功能，如WebUploader，它就支持QQ截图然后粘贴上传。

　　首先，截图粘贴上传的核心思想是，监听粘贴事件，然后获取剪切板中的数据，如果是一张图片，则触发上传事件。

　　代码片段如下：

　我们发现现在有好多上传应用已经提供了截图粘贴上传功能，如WebUploader，它就支持QQ截图然后粘贴上传。　　首先，截图粘贴上传的核心思想是，监听粘贴事件，然后获取剪切板中的数据，如果是一张图片，则触发上传事件。　　代码片段如下：

　　从上面代码可以看出，上传的过程都是一样的，主要是获取文件的方式。当进行粘贴（右键paste/ctrl+v）操作时，触发剪贴板事件’paste’，从系统剪切板获取内容，而系统剪切板的数据在不同浏览器保存在不同的位置：

　　1.IE内核：windows.clipboardData

　　2.其它：e.originalEvent.clipboardData

　　五、拖拽上传

　　拖拽上传的方式，支持的浏览器比较少，因为它用到了HTML5的两个新的属性（API）一个是DragandDrop,一个是FileAPI。

　　上传域监听拖拽的三个事件：dragEnter、dragOver和drop，分别对应拖拽至、拖拽时和释放三个操作的处理机制，当然你也可以监听dragLeave事件。

　　HTML5的FileAPI提供了一个FileList的接口，它可以通过拖拽事件的e.dataTransfer.files来传递的文件信息，获取本地文件列表信息。

　　FileAPI在HTML5规范中只是草案，在W3C草案中，File对象只包含文件名、文件类型和文件大小等只读属性。但部分浏览器在草案之外提供了一个名为FileReader的对象，用以读取文件内容，并且可以监控读取状态，它提供的方法有：“readAsBinaryString”，”readAsDataURL”，”readAsText”，”abort”等。

　　代码片段如下：