直接通过网页表单上传文件到OSS,无需经过自己的服务器-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

直接通过网页表单上传文件到OSS,无需经过自己的服务器

wood23 2014-05-01 00:17:09 34852
S3有一个很赞的功能就是通过表单上传object。
将S3相关的代码修改了下,发现可以通过表单上传到OSS啦!
简单说就是只需要通过一个网页,就可以直接向bucket里写入数据了。
需要下载附件中的 包,并解压得到一个html文件
用浏览器打开此文件,我用的是chrome,其他的没试过

如图所示:
1. 输入ID和KEY
将图中的your-id和your-key替换成自己OSS的ID和KEY,可以从控制台上找到
2. 输入想要上传的bucket的名字,例如叫lalala,就应该将your-bucket替换成lalala
http://lalala.oss.aliyuncs.com 或者是http://oss.aliyuncs.com/lalala
3. 点击设置URL按钮
4. 默认的Policy是生效到2120年1月1日,上传的文件大小不超过100MB
可以根据需要自己修改生效的时间和允许的文件大小
也可以不修改
5. 点击添加Policy按钮
6. 选择上传到OSS中的object的名字
默认是upload/{filename}, 这个表示上传后的object name是upload/ 的前缀加上本地选择文件的文件名。

可以直接填my-oss-upload-from-browser
也可以填upload/{filename}/mytest
7. 点击“选择文件”按钮, 选择本地文件
8. 点击“填入Content-Type", 会自动根据本地文件的文件名来选择Content-Type
9. 点击“Upload”, 真正上传文件




这是执行完步骤1-9后的截图




10. 可以去控制台中查看是否上传成功
本地文件是1.html
key:
分别为my-oss-upload-from-browser
upload/{filename}
和upload/{filename}/mytest的结果




需要注意的是:网页中不会存储用户的ID和KEY。请各位保存好自己的ID和KEY,千万不要将其写入网页中,发布到网站上。
我在附件中会贴出示例代码,请各位自取。如果因为示例代码带来的任何后果,本人可负不了责任啊。



oss表单上传文件 oss无需 通过表单上传文件 oss网页无需 表单上传文件服务器
分享到
取消 提交回答
全部回答(12)
  • wood23
    2015-07-28 21:40:42
    回 15楼(废客泉) 的帖子
    恩,是的,没有考虑跨域。
    这个帖子里有:
    http://bbs.aliyun.com/read/230310.html?spm=0.0.0.0.BNTWZM

    -------------------------

    回 18楼(neo@163) 的帖子
    我也不知道,没有设置权限啊。
    0 0
  • neo@163
    2015-07-20 10:55:12
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    用户组权限:你所属的用户组没有下载附件的权限  没权限下载呀

    -------------------------

    回楼主wood23的帖子
    请问为什么下载不了呢?告诉我,我的用户组权限没有权限呀。
    0 0
  • 不弃不弃
    2015-07-19 19:17:04
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    为什么没有权限下载附件???
    0 0
  • 废客泉
    2015-07-09 17:21:02
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    你这个不能用AJAX跨域..
    0 0
  • jeff.ye
    2015-07-01 12:15:00
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    请问大神,如何通过kindeditor-all.js这个控件实现改功能?
    0 0
  • 被占用昵称
    2015-06-12 20:41:13
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    加一个服务器端程序,根据用户的文件计算出来policy和签名
    1) 用户选择文件,ajax 上传文件信息,获得服务器给出的临时policy和签名 (比如文件比较小,那么存活的时间就设置短点)
    2) 用户点击上传,此时文件才开始从浏览器上传到OSS

    因为CORS的限制,用户理论上来说不能从别的地址上传文件。
    0 0
  • rayguo
    2015-05-17 16:36:01
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    对啊,这个是可以处理上传文件,但上传文件之后如何通知浏览器和服务器文件已上传祸或者执行某回调函数,就没有下文了。

    -------------------------

    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    像又拍云有一个return-url,这个时候服务器可以做一些处理,通知用户上传成功或者失败。
    0 0
  • oracle1010
    2015-04-27 16:31:58
    回9楼cad看图的帖子
    数据提交成功失败, 在这里好像没有办法展现! 有没有办法可以把提交数据页面与逻辑页面分开来做呢? 这样也更安全, 还能处理返回
    0 0
  • cad看图
    2015-04-27 13:43:35
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    如果签名、policy暴露出来,除了别人可以上传到我的bucket,还有什么风险吗
    0 0
  • 萧十一郎
    2015-03-07 15:55:35
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    如果想分块断点上传,怎么办?我总获取不到返回的xml
    0 0
  • 深度学习
    2015-03-01 18:08:43
    不错啊
    0 0
  • 珑心
    2014-05-04 10:48:01
    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    高端大气上档次,赞一个。好东西啊。

    -------------------------

    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    追问一下,上传是妥妥没问题了,但是如果普通用户,访问我们的网页,并抓包的话,所有值就暴露了,他完全可以自己再写个网页,模拟我们的请求,然后把文件传到我们的空间。。。。有办法做鉴权等防范么?

    -------------------------

    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    其实都不用抓包,打开html直接看源码就行了。所有代码都在js里面。

    -------------------------

    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    哦 我知道了。
    0 0
滑动查看更多
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

相似问题
最新问题