前端直傳OSS物件儲存(多圖,多標籤上傳)
阿新 • • 發佈:2019-01-02
程式碼下載:
1.簽名在前端完成:點選下載
2.簽名在PHP完成(推薦):點選下載
這裡主要是針對第二種直傳做修改
首先下載第二種壓縮包;,解壓
把檔案複製到專案裡,可以訪問就好
樣式自己改
首先封裝驗籤方法,用於前端ajax呼叫
<?php function gmt_iso8601($time) { $dtStr = date("c", $time); $mydatetime = new DateTime($dtStr); $expiration = $mydatetime->format(DateTime::ISO8601); $pos = strpos($expiration, '+'); $expiration = substr($expiration, 0, $pos); return $expiration."Z"; } function getAuth(){ $id= 'LTAI*****qX5h'; $key= '6dLVHccMdh***vlPDbIdxf6nh'; $host = 'http://abcd.oss-cn-hangzhou.aliyuncs.com/'; $now = time(); $expire = 30; //設定該policy超時時間是30s. 即這個policy過了這個有效時間,將不能訪問 $end = $now + $expire; $expiration = gmt_iso8601($end); $dir = 'upload-image/'; //最大檔案大小.使用者可以自己設定 $condition = array(0=>'content-length-range', 1=>0, 2=>1048576000); $conditions[] = $condition; //表示使用者上傳的資料,必須是以$dir開始, 不然上傳會失敗,這一步不是必須項,只是為了安全起見,防止使用者通過policy上傳到別人的目錄 $start = array(0=>'starts-with', 1=>'$key', 2=>$dir); $conditions[] = $start; $arr = array('expiration'=>$expiration,'conditions'=>$conditions); //echo json_encode($arr); //return; $policy = json_encode($arr); $base64_policy = base64_encode($policy); $string_to_sign = $base64_policy; $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true)); $response = array(); $response['accessid'] = $id; $response['host'] = $host; $response['policy'] = $base64_policy; $response['signature'] = $signature; $response['expire'] = $end; //這個引數是設定使用者上傳指定的字首 $response['dir'] = $dir; echo json_encode($response); } ?>
再次封裝最主要的上傳類
phpUrl = '/get.php'//獲取驗籤資料的方法路徑 xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", phpUrl, false ); xmlHttp.send( null ); console.log(xmlHttp); var obj = eval ("(" + xmlHttp.responseText+ ")"); var host = obj['host'] var policyBase64 = obj['policy'] var accessid = obj['accessid'] var signature = obj['signature'] var expire = parseInt(obj['expire']) var key = obj['dir'] //filenames 用來區分不同的<input>::name,方便後臺接收 //filepath 檔案上傳儲存的路勁 function postfile(filenames,filepath) { //預設使用後臺返回的路徑 if(filepath==''){ filepath = key; } $("#container_"+filenames).html('<span id="ossfile_'+filenames+'">你的瀏覽器不支援flash,Silverlight或者HTML5!</span><a id="selectfiles_'+filenames+'" href="javascript:void(0);" class="btn btn-primary radius upload-btn">選擇檔案</a><a id="postfiles_'+filenames+'" href="javascript:void(0);" class="btn btn-primary radius upload-btn">開始上傳</a><span id="console_'+filenames+'"></span>'); var objs = timestamp(); var storeAs = filepath+objs; //名稱空間 var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight,html4', browse_button : 'selectfiles_'+filenames, //runtimes : 'flash', container: document.getElementById('container_'+filenames), 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':objs + '${filename}', 'key' : storeAs + '${filename}', 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status' : '201', //讓服務端返回201,不然收不到上傳到OSS返回的資料 'signature': signature, }, init: { PostInit: function() { document.getElementById('ossfile_'+filenames).innerHTML = ''; document.getElementById('postfiles_'+filenames).onclick = function() { uploader.start(); return false; }; }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementById('ossfile_'+filenames).innerHTML = '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' +'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' //--插入input儲存標籤name提交圖片連結(根據自己需求修改name值,filenames最好不要動,這個是用來區分不同的圖片上傳的)--// +'</div><input type="hidden" id="' + file.id + '_1" name="Banner['+filenames+']" />'; }); }, UploadProgress: function(up, file) { var d = document.getElementById(file.id); d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width= 2*file.percent+'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function(up, file, info) { if (info.status >= 200 || info.status < 200) { var str=info.response; //建立文件物件 var parser=new DOMParser(); var xmlDoc=parser.parseFromString(str,"text/xml"); //提取資料 var countrys = xmlDoc.getElementsByTagName('Key'); //註釋的部分可自行列印,檢視資料 //var location = xmlDoc.getElementsByTagName('Location'); // var arr = []; //arr.push(countrys[0].textContent);//返回不到域名的圖片連結 // arr.push(location[0].textContent);//返回帶域名的資料,可以用來做前端圖片展示 $('#'+file.id+'_1').val(countrys[0].textContent); $('#'+file.id).html(countrys[0].textContent+" | <b>上傳成功</b>"); // document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上傳成功'; } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function(up, err) { document.getElementById('console_'+filenames).appendChild(document.createTextNode("\nError xml:" + err.response)); } } }); uploader.init(); } /** * 生成檔名 * @returns */ function timestamp(){ var time = new Date(); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return ""+y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s); } function add0(m){ return m<10?'0'+m : m; }
前端html程式碼和js掉用
<div id="container_image">
<script language="javascript">
postfile('image','');
</script>
</div>