本教程的目录是通过三个例子介绍如何在Html表单提交直传OSS
第一个例子：讲解如何在JS直接签名，直接表单上传到OSS
第二个例子：讲解如何在从后端PHP获取签名，然后直接表单上传到OSS
第三个例子：讲解如何在从后端PHP获取签名及上传后回调。然后直接表单上传到OSS，OSS回调完应用服务器再返回给用户。
每个用OSS的用户，都会用到上传。由于是网页上传，其中包括一些APP里面的h5页面，对上传的需求很强烈，很多人采用的做法是用户在浏览器／APP上传到应用服务器，然后应用服务器再把文件上传到OSS。
这种方法有三个缺点，
第一：上传慢，先上传到应用服务器，再上传到OSS，网络传送多了一倍，而且OSS是采用BGP带宽，能保证各地各运营商的速度。
第二：扩展性不好，如果后续用户多了，应用服务器会成为瓶颈。
第三：费用高，因为OSS上传流量是免费的。如果数据直传到OSS，不走应用服务器。那么将能省下几台应用服务器。
改进方案1：客户端用JS直接签名，然后上传到OSS
下面我将介绍用plupload&，在JS端签名然后直传数据到OSS的例子
二维码：可以用手机(微信，QQ，手机浏览器等）扫一扫试试
原理&&&&&&&&&&&&&&&&&&
本例子的功能
1.采用plupload&直接提高表单数据(即PostObject)到OSS
2.支持html5,flash,silverlight,html4&等协议上传
3.&可以运行在PC浏览器，手机浏览器，微信等
4.可以选择多文件上传
5.显示上传进度条
6.可以控制上传文件的大小
OSS的PostObject&API细节可以参照(看不懂没有关系)：
plupload是一款简单易用且功能强大，&拥有多种上传方式，(html5,&flash,&&silverlight,&html4)等方式，会智能检测当前环境
选择最适合的方式，并且会优先采用Html5，&所以不用花心思去当前的浏览器要用何种方式上传，plupload会帮您考虑好。
关键代码& & & &&
因为OSS原生支持POST协议。所以只要将plupload在发送POST请求时，带上OSS签名即可。
核心代码如下：
var uploader = new plupload.Uploader({
&&&&runtimes : 'html5,flash,silverlight,html4',
&&&&browse_button : 'selectfiles',
&&&&//runtimes : 'flash',
&&&&container: document.getElementById('container'),
&&&&flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
&&&&silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
&&&&url : host,
&&&&multipart_params: {
&&&&&&&&'Filename': '${filename}',
&&&&&&&&'key' : '${filename}',
&&&&&&&&'policy': policyBase64,
&&&&&&&&'OSSAccessKeyId': accessid,
&&&&&&&&'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
&&&&&&&&'signature': signature,
签名signature主要是对policyText进行签名，最简单的例子如下：&
var policyText = {
&&&&"expiration": "T12:00:00.000Z", //&&&&&& 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
&&&&"conditions": [
&&&&["content-length-range", 0, ] // 设置上传文件的大小限制,如果超过了这个大小，文件上传到OSS会报错的
Cors（跨域访问）
&注意：如果一定要保证bucket属性Cors设置支持POST方法。因为这个HTML直接上传到OSS，会产生跨域请求。必须在bucket属性里面设置允许跨域, 可以在OSS控制台里面设置&设置如下图：&
/files/ossteam/oss-h5-upload-js-direct.tar.gz&
阅读(...) 评论()阿里云OSS利用iframe实现图片异步上传-Php常用代码-Php教程-壹聚教程网阿里云OSS利用iframe实现图片异步上传
阿里云OSS上传工具是阿里云专用的上传功能了，下面我就为各位介绍一个阿里云OSS利用iframe实现图片异步上传了，这个例子非常的简单。
阿里云 OSS 图片上传 实现异步上传 相关代码：
index.php:
&* To change this template, choose Tools | Templates
&* and open the template in the editor.
if (isset($_POST) && !empty($_POST)) {
&&& echo &&pre&&;
&&& var_dump($_POST);
&!DOCTYPE html&
&&& &head&
&&&&&&& &title&&/title&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&&&&&&& &script src=&http://filela./js/jquery-1.9.0.min.js&&&/script&
&&& &/head&
&&& &body&
&&&&&&& &h1&添加操作&/h1&
&&&&&&& &form action=&& method=&post& &
&&&&&&&&&&& &iframe src=&upload.php&& frameborder=&no& border=&0& marginwidth=&0& marginheight=&0& scrolling=&no& allowtransparency=&yes&&&/iframe&&br/&
&&&&&&&&&&& 名称： &input type=&text& value=&& name=&name&&
&&&&&&&&&&& &div id=&res&& &/div&
&&&&&&&&&&& &input type=&submit& value=&submit& /&
&&&&&&& &/form&
&&& &/body&
upload.php
$access_id = '';
$access_key = '';
$policy = '{&expiration&: &T12:00:00.000Z&,&conditions&:[{&bucket&: &ioutsider& },[&content-length-range&, 0, ]]}';
$policy = base64_encode($policy);
$signature = base64_encode(hash_hmac('sha1', $policy, $access_key, true));
$file_name = date('Y') . '/' . date('m') . '/' . md5(microtime(true)) . '.jpg';
//print_r(get_headers('http://ioutsider.oss-cn-'));
&!DOCTYPE html&
&&& &head&
&&&&&&& &title&&/title&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&&&&&&& &script src=&http://filela./js/jquery-1.9.0.min.js&&&/script&
&&& &/head&
&&& &body&
&&&&&&& &form id=&upload& action=&http://ioutsider.oss-cn-& method=&POST& enctype=&multipart/form-data&&
&&&&&&&&&&& &label for=&file&&选择文件:&/label&
&&&&&&&&&&& &input type=&hidden& name=&OSSAccessKeyId& id=&OSSAccessKeyId&& value=&&?php echo $access_ ?&& /&
&&&&&&&&&&& &input type=&hidden& name=&policy& id=&policy&& value='&?php echo $ ?&' /&
&&&&&&&&&&& &input type=&hidden& name=&Signature& id=&Signature&& value=&&?php echo $ ?&& /&
&&&&&&&&&&& &!--&input type=&hidden& name=&key& id=&key&& value=&upload/${filename}& /&--&
&&&&&&&&&&& &input type=&hidden& name=&key& id=&key&& value=&&?php echo $file_ ?&& /&
&&&&&&&&&&& &input type=&hidden& name=&success_action_redirect& value=&http://iphotos.me/res.php?img=&?php echo $file_ ?&& /&
&&&&&&&&&&& &input type=&file& name=&file& id=&file& /&
&&&&&&&&&&& &input type=&submit& name=&upload& value=&上传& /&
&&&&&&& &/form&
&&& &/body&
上传成功后跳转的页面：
&!DOCTYPE html&
&&& &head&&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&&&&&&& &script src=&http://filela./js/jquery-1.9.0.min.js&&&/script&
&&& &/head&
&&& &body&
&&&&&&& &?php $img = $_GET['img']; ?&
&&&&&&& &?php if ($img): ?&
&&&&&&&&&&& &img src='http://ioutsider.oss-cn-/&?php echo $ ?&' width='200' height='200' /&
&&&&&&&&&&& &script&
&&&&&&&&&&&&&&& $(function(){
&&&&&&&&&&&&&&&&&&& alert('上传成功');
&&&&&&&&&&&&&&&&&&& window.parent.$('#res').append(&&input type='hidden' value='&?php echo $img ?&' name='path'&&)
&&&&&&&&&&&&&&& })
&&&&&&&&&&& &/script&
&&&&&&& &? ?&
&&& &/body&
上一页： &&&&&下一页：相关内容<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&}