OSS web直传 ajax方式 上传图片、文件
部分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 web直传 ajax方式 上传图片、文件的更多相关文章
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- ajax方式下载文件
在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...
- oss web直传
签名信息 auth.php <?php function gmt_iso8601($time) { $dtStr = date("c", $time); $mydatetim ...
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...
- ajax方式上传图片到Django后台
参考价值最大 https://blog.csdn.net/huangql517/article/details/81259671 https://www.cnblogs.com/chenjianhon ...
- web前端 ajax请求上传图片数据类型处理
form: function (url, paras, files, success) {//上传的文件类型是MultipartFile[]//如果把需要的参数直接传入,则会请求错误//设置请求参数的 ...
- Jquer + Ajax 制作上传图片文件
没什么 说的 直接 上代码 //选择图片并上传 function selectImg(node){ var f = node.value; var file = node.files[0]; if( ...
- django 的 ajax 方式上传图片
页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" ...
- ajax方式提交文件到后台同时加其他参数
struts2后台Action方法,直接用参数成员变量对象的属性接收即可
随机推荐
- CF #312 E. A Simple Task 线段树
题目链接:http://codeforces.com/problemset/problem/558/E 给一个字符串,每次对一个区间内的子串进行升序或者降序的排列,问最后字符串什么样子. 对于字符串排 ...
- jvm的搭建
首先先 说明一下接下来要用到的,环境变量中的path和classpath的区别 1.path路径用来告诉计算机.exe文件的路径,classpath路径是用来告诉计算机.class文件的路径 2.系统 ...
- 请为main函数提供返回值
很多人甚至市面上的一些书籍,都使用了void main( ) ,其实这是错误的.C/C++ 中从来没有定义过void main( ).C++ 之父 Bjarne Stroustrup 在他的主页上的 ...
- [ext4]07 磁盘布局 - 块/inode分配策略
Ext4系统从设计上就认为数据局部性是文件系统的文件系统的一个理想品质. 在机械硬盘上,相关联的数据存放在相近的blocks上,可以使得在访问数据时减少磁头驱动器的移动距离,从而加快IO访问. 在SS ...
- 55 Jump Game i && 45 Jump Game ii
Jump Game Problem statement: Given an array of non-negative integers, you are initially positioned a ...
- OC中Foundation框架之NSDictionary、NSMutableDictionary
NSDictionary概述 NSDictionary的作用类似:通过一个key ,就能找到对应的value 同样 NSDictionary是不可变的,一旦初始化完毕,里面的内容就无法修改 NSDic ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...
- linux-redhat-iso 下载
http://archive.download.redhat.com/pub/redhat/linux/9/en/iso/i386/ http://www.jb51.net/do/plus/downl ...
- Saltstack自动化运维
Saltstack三大功能 1,远程执行 2,配置管理(状态) 3,云管理 四种运行方式: Local 本地 Minion/Master C/S Syndic 代理模式 Salt S ...
- poj1797 Heavy Transportation Dijkstra算法的简单应用
题目链接:http://poj.org/problem?id=1797 题目就是求所有可达路径的其中的最小值边权的最大值 即对于每一条能够到达的路径,其必然有其最小的承载(其实也就是他们自身的最大的承 ...