• 阿里OSS ajax方式 web直传


    部分js代码

    send_request = function(){//这是从后台获取认证策略等信息。
      var htmlobj=$.ajax({url:root+"/service/policyInfoController/policy",async:false});
      return htmlobj.responseText;
    };
    
    function get_signature()//读取获得的参数
    {
    //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
      now = timestamp = Date.parse(new Date()) / 1000; 
      if (expire < now + 3)
      {
        body = send_request();
        console.log(body);
        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;
    };
    
    //组装发送数据
    var request = new FormData(); 
    request.append("OSSAccessKeyId",accessid);//Bucket 拥有者的Access Key Id。
    request.append("policy",policyBase64);//policy规定了请求的表单域的合法性
    request.append("Signature",signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
    //---以上都是阿里的认证策略 
    request.append("key",g_object_name);//文件名字,可设置路径
    request.append("success_action_status",'200');// 让服务端返回200,不然,默认会返回204
    request.append('file', file);//需要上传的文件 file  
    
    request.append("callback",callbackbody);//回调,非必选,可以在policy中自定义
    
    $.ajax({  
            url : host,  //上传阿里地址
            data : request,
            processData: false,//默认true,设置为 false,不需要进行序列化处理
            cache: false,//设置为false将不会从浏览器缓存中加载请求信息
            async: false,//发送同步请求
            contentType: false,//避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
            dataType: 'JSONP',//不涉及跨域  写json即可
          type : 'post',
          success : function(callbackHost, request) { //callbackHost:success,request中就是 回调的一些信息,包括状态码什么的 
            var name=$this.attr("name");
            $this.closest("li").append("<span class='img-span'><img src="+host+"/"+get_uploaded_object_name(file.name)+">");//动态向页面添加上传图片
        },  
        error : function(returndata) {  
            alert("上传图片出错",false);  
        }  
    }); 

     由于业务原因以及一些样式的问题不得不用ajax方式上传,大家参考下即可。

      

    业精于勤荒于嬉。
  • 相关阅读:
    微信小程序实现课程表实例
    探索Java中的网络编程技术
    Java中的Spring MVC简介笔记
    我没有想赢,我只是不想输
    下次路过,人间再无我。
    从零基础入门MySQL数据库基础课
    vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
    学习网站/实用工具,收藏的快搜网站,想找什么都有!!!
    【灵魂拷问】你真的懂得Mysql的管理和使用吗?
    【领会要领】web前端-轻量级框架应用(jQuery基础)
  • 原文地址:https://www.cnblogs.com/mottled/p/6979536.html
Copyright © 2020-2023  润新知