使用form表单跨域cors进行OSS文件上传-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

浅斟 2015-03-15 15:49:38 19824
这些天在做一个数据分析网站的优化工作,接触了一些阿里云的服务,包括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以下版本的方法
第一次发帖,有什么问题,可以回帖多交流,谢谢






oss跨域 使用form 使用cors oss使用文件上传 oss使用cors
分享到
取消 提交回答
全部回答(3)
  • still_vv
    2015-08-25 00:03:33
    Re使用form表单跨域cors进行OSS文件上传
    先马再看
    0 0
  • youmu286
    2015-04-27 12:12:58
    Re使用form表单跨域cors进行OSS文件上传
    还是上传到服务器再传给OSS更方便点

    反正上传流量不要钱
    0 0
  • cad看图
    2015-04-24 10:25:19
    Re使用form表单跨域cors进行OSS文件上传
    能把你不可思议的写法全部贴出来看一下吗,我在ie8页遇到了这个问题,还想使用ajax判断一下图片在oss上存储成功没有或则其他不可思议的方法也行啊,大神
    0 0
添加回答
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题