阿里云oss js前端获取签名直传文件

本文主要是介绍阿里云oss js前端获取签名直传文件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 原来的官方文档是先选择文件,再点击上传按钮,上传文件,我这里是选择完文件,就上传,这里主要是在FilesAdded这个里面添加完文件,立刻初始化一次set_upload_param(uploader, '', true); 就能选择完就上传了.

2.这个只是个简单的图片上传,没有用到<input>这个属性来选择文件,,好像用 plupload 里面的属性 browse_button 来选择文件的,我同事用其他插件来上传文件,

这里有个坑,就是你那个<input name="file">,就是你的选择文件的input的name属性必须是file,否者会出现IncorrectNumberOfFilesInPOSTRequest 错误,好坑.

3. 这个地址是阿里云源码来的,AppPostPolicyServer是签名的java项目,ss-h5-upload-js-php文件夹里面是前端直传,具体自己下载看看或者去官方下载也可以.我就是

根据这两个文件夹的东西来修该出我下面的代码的.其他就需要你看官方文档了.

http://download.csdn.net/download/hch15112345824/10121664

这个是我文件上传的最后想要的效果图,点击上传图片,选择完图片,直接文件上传到阿里云,然后显示URL,图片的地方也显示上传的图片.

jsp的代码如下:

                            <!-- 阿里云上传 --><div id="container" class="dl-horizontal form-group"><a id="selectfiles" href="javascript:void(0);" class="btn btn-circle btn-success" data-style="expand-left" data-spinner-color="#333">上传图片</a><a id="postfiles" href="javascript:void(0);"></a></div><!-- 这个显示进度的 -->	<div id="ossfile"></div>																			                          </div>

js的代码如下:

// id.
accessid = ''
// 秘钥.
accesskey = ''
// host: 指的是用户要往哪个域名发往上传请求   host+文件名就是下载路径了.
host = ''
// policy：指的是用户表单上传的策略policy，是经过base64编码过的字符串.
// 加密.
policyBase64 = ''
// signature：是对上述第三个变量policy签名后的字符串.
signature = ''
// 返回的body.
callbackbody = ''
// 文件的名字.	
filename = ''
key = ''
// 过期时间.
expire = 0
// 文件名字.
g_object_name = ''
// 文件类型. local_name
g_object_name_type = 'random_name'
now = timestamp = Date.parse(new Date()) / 1000; 
// 这个是获取accessid policy signature dir host expire.
function send_request()
{var xmlhttp = null;if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else if (window.ActiveXObject){xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}if (xmlhttp!=null){serverUrl = ctx + '/aliyun/getPolicy';xmlhttp.open( "GET", serverUrl, false );xmlhttp.send( null );return xmlhttp.responseText;}else{alert("您的浏览器不支持XMLHTTP,请换浏览器登录再使用.");}
};function get_signature()
{// 可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲.now = timestamp = Date.parse(new Date()) / 1000; if (expire < now + 3){body = send_request()var obj = eval ("(" + body + ")");host = obj['host']policyBase64 = obj['policy']accessid = obj['accessid']signature = obj['signature']expire = parseInt(obj['expire'])callbackbody = obj['callback'] key = obj['dir']return true;}return false;
};// 截取文件的后缀.
function get_suffix(filename) {pos = filename.lastIndexOf('.')suffix = ''if (pos != -1) {suffix = filename.substring(pos)}return suffix;
}// 上传的时候文件保存路径和名称:我这里是 文件夹+uuid+文件后缀.
function calculate_object_name(filename)
{if (g_object_name_type == 'local_name'){g_object_name += "${filename}"}else if (g_object_name_type == 'random_name'){var uuid = generateUUID();suffix = get_suffix(filename);g_object_name = key + uuid + suffix;}return ''
}//初始化一些参数.
function set_upload_param(up, filename, ret)
{if (ret == false){ret = get_signature()}g_object_name = key;if (filename != '') {suffix = get_suffix(filename)calculate_object_name(filename)}new_multipart_params = {'key' : g_object_name,'policy': policyBase64,'OSSAccessKeyId': accessid, 'success_action_status' : '200', // 让服务端返回200,不然，默认会返回204.'callback' : callbackbody,'signature': signature,};up.setOption({'url': host,'multipart_params': new_multipart_params});up.start();
}// 这里是官方原来的文档代码,集体如下.
var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : 'selectfiles', container: document.getElementById('container'),flash_swf_url : 'static/aliyunUpload/Moxie.swf',silverlight_xap_url : 'static/aliyunUpload/Moxie.xap',url : 'http://oss.aliyuncs.com',multi_selection : false,filters: {mime_types : [ // 只允许上传图片和zip,rar文件.{ title : "Image files", extensions : "jpg,gif,png,bmp" }],max_file_size : '10mb', // 最大只能上传10mb的文件.prevent_duplicates : true // 不允许选取重复文件.},init: {FilesAdded: function(up, files) {plupload.each(files, function(file) {document.getElementById('ossfile').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>'+'</div>';});set_upload_param(uploader, '', true);},BeforeUpload: function(up, file) {set_upload_param(up, file.name, false);},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) {uploader.removeFile(file);var imgDir = host+g_object_name;var title = file.name;if (info.status == 200) {$.ajax({url: ctx + '/advertisement/aliUpload',type:"post",async: false,data:{"imgDir" : imgDir,"productId" : productId,"title" : title},dataType:"json",success: function (data) {if(data.isSuccess == '1'){$("#imgDir").val(data.imgDir);$("#imgView").attr('src', data.imgDir);// 删除进度条信息.$("div#"+file.id).remove();}else{alert("保存信息失败,请重新上传文件.");delFileList();}},error: function (data, textStatus) {alert("上传失败,请检查网络之后重新上传.");delFileList();}});} else {alert("上传失败,请检查网络之后重新上传.");delFileList();} },Error: function(up, err) {if (err.code == -600) {alert("选择的文件太大了,重新选择文件.");}else if (err.code == -601) {alert("选择的文件后缀不对,重新选择文件.");}else if (err.code == -602) {alert("这个文件已经上传过一遍了或者已存在上传队列面,请确认再上传.");}else {alert("上传出现错误,请稍后再试.");console.log(err);console.log(up);}delFileList();}}
});// 出错删除上传队列重新上传.
function delFileList(){document.getElementById('ossfile').innerHTML="";uploader.splice(0,9999);
}// 获取uuid.
function generateUUID() {var d = new Date().getTime();var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = (d + Math.random()*16)%16 | 0;d = Math.floor(d/16);return (c=='x' ? r : (r&0x3|0x8)).toString(16);});return uuid;
};uploader.init();