基于云服务的文件跨域上传的研究与实践.docVIP

基于云服务的文件跨域上传的研究与实践 　　摘要：该文列举了当前几种常见的文件上传方式，该文基于云服务研究了文件跨域上传的解决方案，并指出了每一种文件上传技术，在当前的技术背景下各自存在的优缺点。通过对每一种技术优缺点的权衡，找出一种合适的方案来解决项目中文件跨域上传的问题。 　　关键词：上传；跨域；同源策略 　　中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）18-0071-02 　　1 背景 　　笔者最近在开发一个基于 HTML5 的社区活动应用商店的项目，该项目主要是面向活动组织者并以 Web API 的方式提供一系列的在线服务，以方便活动发起者进行活动的筹备和组织。其中，有一项云存储功能，方便第三方活动发起者在他自己的网站或 APP中通过调用上传API，将活动相关文件譬如活动照片、视频等存储到活动云服务器。该功能涉及文件异步上传、跨域上传等技术难点，即本文的研究重点。 　　2 研究 　　2.1 传统上传方式 　　浏览器一般都是通过 HTTP 的 POST 方法来实现基本的上传操作。最常见的数据提交方式就是浏览器的原生表单，使用其默认的enctype属性设置application/x-www-form-urlencoded。但是这仅限于上传基本的文本数据，如果要上传文件，可以设置enctype属性为 multipart/form-data。具体代码如下： 　　 　　 　　 　　 　　但是使用传统方式上传存在许多的弊端。首先，该上传方式属于“同步上传”，就是在上传过程中会把页面“锁死”，用户只能够等待文件上传结束页面刷新完，才能进行下一步的操作。不仅如此，使用传统上传文件方式，上传文件的当前进度以及上传的速度都不得而知，没有一个很好的显示交互过程，就用户角度来说体验很差。而且对于有大量上传任务的用户来说，这种“同步上传”的方式是不能对其进行批量处理的。 　　2.2 异步上传方式 　　由于“同步上传”存在的弊端，寻找更优的方式来解决上传时页面“锁死”和交互信息不足的问题，成为了开发人员当前急需解决的事。 　　显然同步上传已经无法解决上述问题，自然就提出异步的解决方式。异步上传文件的方式有很多，本文主要介绍一下异步上传文件中使用 Flash、Ajax 以及基于 HTML5 的文件上传方式。 　　2.2.1 Flash上传 　　Flash 是比较常见的上传方法之一。在 Flash 中上传文件只要对 FileReference 进行简单的封装就可以实现。通过 FileReference类的方法可使应用程序本地加载和保存数据文件，并与远程服务器之间传输文件数据。另外，Flash 的优势在于有较好的文件上传队列，能够自动逐个上传文件，将上传的进度很好的反馈。但是第三方插件毕竟还是需要浏览器的支持，比如 Safari 不支持 Flash，也就造成 Flash 会存在兼容性的问题，并且就目前 Flash 的发展来看，Flash 也因为资源的消耗严重而不断被放弃使用。也因为如此，其他的上传技术将得到进一步发展。 　　2.2.2 iframe上传 　　因为 Flash 这些第三方插件存在兼容性的问题，我们需要一种能够在浏览器上直接使用 Web 技术来解决的方法。因此想到使用 iframe 来模拟文件的异步上传操作。实现这种方法很简单，只需要设置 form 表单的 target 属性到 iframe 的 name 。总体来说，这种基于 iframe 的表单上传，因为异步、简单，适用于一些简单的上传应用场景。代码如下： 　　 　　File： 　　 　　 　　 　　2.2.3 HTML5 新接口 　　随着 HTML5 的发布，添加了一些文件读取的新接口，浏览器处理用户电脑里的文件可以使用以下三个方法：FormData Interface、FileList Interface、FileReader API。这三个方法分别实现了浏览器从文件打开、选择、读取三个功能。而且由于XMLHttpRequest Level 2很好地兼容了这三个方法，从而允许我们可以使用 FormData 将表单中的对象状态转换成可保持或传输的格式，从而实现异步上传一个二进制文件。 　　document.getElementById（myform）.onsubmit = function（e） { 　　e.preventDefault（）； 　　var f = e.target， 　　formData = new FormData（f）， 　　xhr = new XMLHttpRequest（）； 　　xhr.open（POST， f.action）； 　　xhr.send