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

《基于云服务的文件跨域上传的研究与实践》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于云服务的文件跨域上传的研究与实践　　摘要：该文列举了当前几种常见的文件上传方式，该文基于云服务研究了文件跨域上传的解决方案，并指出了每一种文件上传技术，在当前的技术背景下各自存在的优缺点。通过对每一种技术优缺点的权衡，找出一种合适的方案来解决项目中文件跨域上传的问题。　　关键词：上传；跨域；同源策略　　中图分类号：TP311文献标识码：A文章编号：1009-3044（2016）18-0071-02　　1背景　　笔者最近在开发一个基于HTML5的社区活动应用商店的项目，该项目主要是面向活动组织者并以WebAPI的方式提供一系列的在线服务，以方便活动发起者进行活动的筹备和组织。其

2、中，有一项云存储功能，方便第三方活动发起者在他自己的网站或APP中通过调用上传API，将活动相关文件譬如活动照片、视频等存储到活动云服务器。该功能涉及文件异步上传、跨域上传等技术难点，即本文的研究重点。　　2研究　　2.1传统上传方式　　浏览器一般都是通过HTTP的POST7方法来实现基本的上传操作。最常见的数据提交方式就是浏览器的原生表单，使用其默认的enctype属性设置application/x-www-form-urlencoded。但是这仅限于上传基本的文本数据，如果要上传文件，可以设置enctype属性为multipart/form-data。具体代码如下：　　　　　

3、　　　　　但是使用传统方式上传存在许多的弊端。首先，该上传方式属于“同步上传”，就是在上传过程中会把页面“锁死”，用户只能够等待文件上传结束页面刷新完，才能进行下一步的操作。不仅如此，使用传统上传文件方式，上传文件的当前进度以及上传的速度都不得而知，没有一个很好的显示交互过程，就用户角度来说体验很差。而且对于有大量上传任务的用户来说，这种“同步上传”的方式是不能对其进行批量处理的。　　2.2异步上传方式　　由于“同步上传”存在的弊端，寻找更优的方式来解决上传时页面“锁死”和交互信息不足的问题，成为了开发人员当前急需解决的事。　　显然同步上传已经无法解决上述问题，自然就提出异步的解

4、决方式。异步上传文件的方式有很多，本文主要介绍一下异步上传文件中使用Flash、Ajax以及基于HTML5的文件上传方式。　　2.2.1Flash上传　　Flash是比较常见的上传方法之一。在Flash中上传文件只要对FileReference进行简单的封装就可以实现。通过7FileReference类的方法可使应用程序本地加载和保存数据文件，并与远程服务器之间传输文件数据。另外，Flash的优势在于有较好的文件上传队列，能够自动逐个上传文件，将上传的进度很好的反馈。但是第三方插件毕竟还是需要浏览器的支持，比如Safari不支持Flash，也就造成Flash会存在兼容性的问题，并

5、且就目前Flash的发展来看，Flash也因为资源的消耗严重而不断被放弃使用。也因为如此，其他的上传技术将得到进一步发展。　　2.2.2iframe上传　　因为Flash这些第三方插件存在兼容性的问题，我们需要一种能够在浏览器上直接使用Web技术来解决的方法。因此想到使用iframe来模拟文件的异步上传操作。实现这种方法很简单，只需要设置form表单的target属性到iframe的name。总体来说，这种基于iframe的表单上传，因为异步、简单，适用于一些简单的上传应用场景。代码如下：　　　　File：　　　　　　　　2.2.3HTML5新接口　　随着HTML5的发布，添加了

6、一些文件读取的新接口，浏览器处理用户电脑里的文件可以使用以下三个方法：FormDataInterface、FileListInterface、FileReaderAPI。这三个方法分别实现了浏览器从文件打开、选择、读取三个功能。而且由于XMLHttpRequestLevel2很好地兼容了这三个方法，从而允许我们可以使用FormData7将表单中的对象状态转换成可保持或传输的格式，从而实现异步上传一个二进制文件。　　document.getElementById（"myform"）.onsubmit=function（e）{　　e.preventDefault（）；　　varf=e

7、.target，　　formData=newFormData（f），　　xhr=newXMLHttpRequest（）；　　xhr.open（"POST"，f.action）；　　xhr.send（formData）；　　}　　完成将FormData对象通过send（）方法传递后，对应的HTTP头信息会自动帮你设置好。不需要再纠结编码的问题。而且就兼容性来说，目前主流的最新版本的浏览器都已经兼容了HTML5，IE也在10以后的版本也开始兼容HTML5。　　虽然HTML5已经得到主