目的
本教程的目錄是通過三個例子介紹如何在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
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": "2020-01-01T12:00:00.000Z", // 設置該Policy的失效時間，超過這個失效時間之后，就沒有辦法通過這個policy上傳文件了
"conditions": [
["content-length-range", 0, 1048576000] // 設置上傳文件的大小限制,如果超過了這個大小，文件上傳到OSS會報錯的
]
}
Cors（跨域訪問）
注意：如果一定要保證bucket屬性Cors設置支持POST方法。因為這個HTML直接上傳到OSS，會產生跨域請求。必須在bucket屬性里面設置允許跨域, 可以在OSS控制台里面設置
設置如下圖：
代碼下載
http://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz