开发者社区> 问答> 正文

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

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,千万不要将其写入网页中,发布到网站上。
我在附件中会贴出示例代码,请各位自取。如果因为示例代码带来的任何后果,本人可负不了责任啊。



展开
收起
wood23 2014-05-01 00:17:09 36080 0
12 条回答
写回答
取消 提交回答
  • 回 15楼(废客泉) 的帖子
    恩,是的,没有考虑跨域。
    这个帖子里有:
    http://bbs.aliyun.com/read/230310.html?spm=0.0.0.0.BNTWZM

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

    回 18楼(neo@163) 的帖子
    我也不知道,没有设置权限啊。
    2015-07-28 21:40:42
    赞同 展开评论 打赏
  • Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    用户组权限:你所属的用户组没有下载附件的权限  没权限下载呀

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

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

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

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

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

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

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

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

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

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

    Re直接通过网页表单上传文件到OSS,无需经过自己的服务器
    哦 我知道了。
    2014-05-04 10:48:01
    赞同 展开评论 打赏
滑动查看更多
问答排行榜
最热
最新

相关电子书

更多
OSS运维进阶实战手册 立即下载
《OSS运维基础实战手册》 立即下载
OSS运维基础实战手册 立即下载