使用form表单跨域cors进行OSS文件上传

这些天在做一个数据分析网站的优化工作，接触了一些阿里云的服务，包括CDN，OSS，遇到了不少困难，当然也是学习了不少东西，其中OSS跨域上传自己在老大的带领下，琢磨出来一点，应该说是小技巧了吧，拿出来与大家分享一下；


首先，感谢下这两篇帖子：
http://（去掉括号里的字）bbs.aliyun.com/read/179074.html?spm=5176.7189909.0.0.2H8Eyl
http:// （去掉括号里的字） bbs.aliyun.com/read/230310.html?spm=0.0.0.0.yqRa3C
（发帖数未到5，不能带链接地址）
第一个帖子，让我知道了cors这个东西是个啥，第二个，当然是教会了我怎么去用（确实有很多帮助，建议看过这两篇再往下看）


下面就在上面两个帖子分享的基础上，分享一点自己所遇到的问题以及解决方法，希望对用需要的人有所帮助。


相信对于如何在后台使用代码进行OSS上传与下载，大家应该都清楚，因为官方给的API已经很清楚的写了详细的demo，亲测可行。现在我主要说下在前端，利用http请求，将选择的文件，不通过服务器，直接上传到OSS（开放存储服务）。
首先，我是使用了上述第二个帖子的相关代码，整理了一下，没有问题，可以跑的通； however， 看下面的代码：


var file = document.getElementById('file').files[0];写法上应该没有什么问题吧，对于我们这些chromer来说，可是在IE10以下的浏览器，DOM元素没有"files"这个属性，god damn! welcome to the painful develop world of IE,这是我在stackoverflow上找解决办法的时候印象较深的一句回答。


如果一定要兼容IE10以下，老大给出了一个建议，使用最原始的form表单提交file，但是：
var fd = new FormData();
fd.append('key', key);
fd.append('Content-Type', file.type);
fd.append('OSSAccessKeyId', oss_key);
fd.append('policy', policyBase64);
fd.append('signature', signature);
fd.append("file", file);
var xhr = self.createXmlHttpRequest();
xhr.upload.addEventListener("progress", self.uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.send(fd);这些Formdata里面的值是怎么通过form表单提交呢？如果是ajax倒是可以直接作为data参数提交请求，直接用form表单呢？
从apeend这个方法可以联想到，应该是把这些key作为id、 name，value作为value，放到了几个input标签里，可能说的不是很清楚吧，直接看代码吧~


$("<input>").attr({'id': 'Content-type', 'name': 'Content-type', 'value': 'application/vnd.ms-excel'}).appendTo($import_button_form);
$("<input>").attr({'id': 'OSSAccessKeyId', 'name': 'OSSAccessKeyId', 'value': oss_key}).appendTo($import_button_form);
$("<input>").attr({'id': 'policy', 'name': 'policy', 'value': policyBase64}).appendTo($import_button_form);
$("<input>").attr({'id': 'signature', 'name': 'signature', 'value': signature}).appendTo($import_button_form);其实这个在我看起来不可思议的写法，是大哥给想出来的，因为前一天晚上，没想出什么办法兼容IE，他看了下form表单提交表单内容的实现，想出来这种写法试试，就试试了，虽然第一次这么写能够提交，但是返回的结果还是错误的，就对比了一下之前ajax正确提交后的http请求header，发现也貌似没有什么不同，返回的报错结果却是说什么key not special（没记太清楚）类似的，应该说key这个表单元素不是特殊的，或者根本没找到。但是在header里面确实看到有呀，这时大哥机智的来了一句，你要不把key这个input标签放到file前面…… $("<input>").attr({'id': 'key', 'name': 'key'}).appendTo($import_button_form);
this.import_button = $("<input>").attr({'type': 'file','id': 'file', 'name': 'file' }).addClass("import-button-input-file").appendTo( $import_button_form );说时迟，那时快，刚换上，重新跑了一遍就成功了。


所以这里就简单分享下这个用表单提交文件到OSS兼容IE10以下版本的方法
第一次发帖，有什么问题，可以回帖多交流，谢谢