部分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方式上传,大家参考下即可。

  

阿里OSS ajax方式 web直传的更多相关文章

  1. OSS web直传 ajax方式 上传图片、文件

    部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

  2. 阿里云 oss 图片上传解决方案 vue (web直传)

    我们通过aliyun-oss-web这个npm去解决 该文章主要介绍如何获取 imgSignature 和 imgPolicy 这两个参数 首先下载 web直传的案例 : http://files.c ...

  3. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. 简单实用后台任务执行框架(Struts2+Spring+AJAX前端web界面可以获取进度)

    使用场景: 在平常web开发过程中,有时操作员要做一个后台会运行很长时间的任务(如上传一个大文件到后台处理),而此时前台页面仍需要给用户及时的进度信息反馈,同时还要避免前台页面超时. 框架介绍: 本架 ...

  5. 微信公众号通过图片选取接口上传到阿里oss

    前言 之前写过一篇微信JS-SDK的使用方法,可进行参考 https://www.cnblogs.com/fozero/p/10256862.html 配置并调用公众号接口权限 1.配置权限微信公众号 ...

  6. ajax方式下载文件

    在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...

  7. [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  8. 文件上传submit、ajax方式

    submit方式: <form id="postForm" name="postForm" action="${rc.contextPath}/ ...

  9. Ajax技术(WEB无刷新提交数据)

    (转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...

随机推荐

  1. 跨域问题The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by t

    withCredentials 属性 上面说到,CORS请求默认不发送Cookie和HTTP认证信息.如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow- ...

  2. JS 拷贝传值和引用传值

    1.拷贝传值:基本数据类型都是“拷贝传值”. 拷贝传值,就是将一个变量的值“拷贝”一份,传给了另一个变量. 拷贝传值中,两个变量之间没有任何联系,修改其中一个变量的值,另一个不会改变. 这两个变量之间 ...

  3. SQL的语言分类

    SQL的语言分类 DQL DQL(Data Query Language):数据查询语言 select DML DML(Data Manipulate Language):数据操作语言 insert ...

  4. 第二周课堂笔记3th and4th

    ---恢复内容开始--- 1.      list列表      可变数据类型 创建列表的方法: A=[“a”,”sda”,”2131”]   直接创建  常用的方法 B=list(“ads”)   ...

  5. 一个上午,勉强记住了几种不同语言编译PE的启动函数

    VC:启动函数最乱,三大函数都在后面.前面8个PUSH DELPHI7:启动函数最整洁,2.3.4.2,形式排队 VB:启动函数最好记,12个0.... 汇编:三大函数距离最紧凑,除VB外,启动函数最 ...

  6. js 仿微信投诉—引入vue.js,拆分组件为单个js

    效果 页面目录 index.html <!DOCTYPE html > <html> <head> <meta charset="UTF-8&quo ...

  7. 编写Map处理逻辑

  8. Nand flash 芯片工作原理

    Nand flash 芯片型号为 Samsung K9F1208U0B,数据存储容量为 64MB,采用块页式存储管理.8 个 I/O 引脚充当数据.地址.命令的复用端口. 芯片内部存储布局及存储操作特 ...

  9. JS控制语句 编程练习 学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。

    编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...

  10. Dash Speed【好题,分治,并查集按秩合并】

    Dash Speed Online Judge:NOIP2016十联测,Claris#2 T3 Label:好题,分治,并查集按秩合并,LCA 题目描述 比特山是比特镇的飙车圣地.在比特山上一共有 n ...