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

来源：互联网发布：java需求分析主要干啥编辑：程序博客网时间：2024/06/06 03:26

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_nameg_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();

阅读全文

0 0