1. 程式人生 > >前端直傳OSS物件儲存(多圖,多標籤上傳)

前端直傳OSS物件儲存(多圖,多標籤上傳)

程式碼下載:

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>