伊人色综合久久天天人守人婷_ Html直接表單直傳阿里云存儲OSS示例

目的

本教程的目錄是通過(guò)三個(gè)例子介紹如何在Html表單提交直傳OSS

第一個(gè)例子：講解如何在JS直接簽名，直接表單上傳到OSS

第二個(gè)例子：講解如何在從后端PHP獲取簽名，然后直接表單上傳到OSS

第三個(gè)例子：講解如何在從后端PHP獲取簽名及上傳后回調。然后直接表單上傳到OSS，OSS回調完應用服務(wù)器再返回給用戶(hù)。

背景

每個(gè)用OSS的用戶(hù)，都會(huì )用到上傳。由于是網(wǎng)頁(yè)上傳，其中包括一些APP里面的h5頁(yè)面，對上傳的需求很強烈，很多人采用的做法是用戶(hù)在瀏覽器／APP上傳到應用服務(wù)器，然后應用服務(wù)器再把文件上傳到OSS。

這種方法有三個(gè)缺點(diǎn)，

第一：上傳慢，先上傳到應用服務(wù)器，再上傳到OSS，網(wǎng)絡(luò )傳送多了一倍，而且OSS是采用BGP帶寬，能保證各地各運營(yíng)商的速度。

第二：擴展性不好，如果后續用戶(hù)多了，應用服務(wù)器會(huì )成為瓶頸。

第三：費用高，因為OSS上傳流量是免費的。如果數據直傳到OSS，不走應用服務(wù)器。那么將能省下幾臺應用服務(wù)器。

改進(jìn)方案1：客戶(hù)端用JS直接簽名，然后上傳到OSS

示例

下面我將介紹用plupload ，在JS端簽名然后直傳數據到OSS的例子

樣例：http://oss-demo.aliyuncs.com/oss-h5-upload-js-php/index.html

二維碼：可以用手機(微信，QQ，手機瀏覽器等）掃一掃試試

原理

本例子的功能

1.采用plupload 直接提高表單數據(即PostObject)到OSS

2.支持html5,flash,silverlight,html4 等協(xié)議上傳

3. 可以運行在PC瀏覽器，手機瀏覽器，微信等

4.可以選擇多文件上傳

5.顯示上傳進(jìn)度條

6.可以控制上傳文件的大小

OSS的PostObject API細節可以參照(看不懂沒(méi)有關(guān)系)：

https://docs.aliyun.com/#/pub/oss/api-reference/object&PostObject

plupload

plupload是一款簡(jiǎn)單易用且功能強大，擁有多種上傳方式，(html5, flash, silverlight, html4)等方式，會(huì )智能檢測當前環(huán)境

選擇最適合的方式，并且會(huì )優(yōu)先采用Html5，所以不用花心思去當前的瀏覽器要用何種方式上傳，plupload會(huì )幫您考慮好。

關(guān)鍵代碼

因為OSS原生支持POST協(xié)議。所以只要將plupload在發(fā)送POST請求時(shí)，帶上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', //讓服務(wù)端返回200,不然，默認會(huì )返回204

'signature': signature,

},

　....

}

簽名signature主要是對policyText進(jìn)行簽名，最簡(jiǎn)單的例子如下：

var policyText = {

'expiration': '2020-01-01T12:00:00.000Z',

//       設置該Policy的失效時(shí)間，超過(guò)這個(gè)失效時(shí)間之后，就沒(méi)有辦法通過(guò)這個(gè)policy上傳文件了

'conditions': [

['content-length-range', 0, 1048576000] // 設置上傳文件的大小限制,如果超過(guò)了這個(gè)大小，文件上傳到OSS會(huì )報錯的

]

}

Cors（跨域訪(fǎng)問(wèn)）

注意：如果一定要保證bucket屬性Cors設置支持POST方法。因為這個(gè)HTML直接上傳到OSS，會(huì )產(chǎn)生跨域請求。必須在bucket屬性里面設置允許跨域, 可以在OSS控制臺里面設置
設置如下圖：

代碼下載

http://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久