阿里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方式上传,大家参考下即可。
阿里OSS ajax方式 web直传的更多相关文章
- OSS web直传 ajax方式 上传图片、文件
部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...
- 阿里云 oss 图片上传解决方案 vue (web直传)
我们通过aliyun-oss-web这个npm去解决 该文章主要介绍如何获取 imgSignature 和 imgPolicy 这两个参数 首先下载 web直传的案例 : http://files.c ...
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 简单实用后台任务执行框架(Struts2+Spring+AJAX前端web界面可以获取进度)
使用场景: 在平常web开发过程中,有时操作员要做一个后台会运行很长时间的任务(如上传一个大文件到后台处理),而此时前台页面仍需要给用户及时的进度信息反馈,同时还要避免前台页面超时. 框架介绍: 本架 ...
- 微信公众号通过图片选取接口上传到阿里oss
前言 之前写过一篇微信JS-SDK的使用方法,可进行参考 https://www.cnblogs.com/fozero/p/10256862.html 配置并调用公众号接口权限 1.配置权限微信公众号 ...
- ajax方式下载文件
在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...
- [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 文件上传submit、ajax方式
submit方式: <form id="postForm" name="postForm" action="${rc.contextPath}/ ...
- Ajax技术(WEB无刷新提交数据)
(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...
随机推荐
- day25-静态、组合、继承
#!/usr/bin/env python # -*- coding:utf-8 -*- # ----------------------------------------------------- ...
- iconfont 在vue项目中的应用(icon-component组件)
前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之s ...
- Postman提取返回值
json响应结果 Postman是做接口测试的,但是很多接口并不是直接就能测试的,需要一些预处理.比如登录的时候,需要传递一个token.如果是网页测试,一般打开登录页面的时候就会自动生成一个toke ...
- Collection单列集合中的常用实现类
Collection 集合层次的根接口 List 有序 有索引 可以重复 ArrayList 底层数据结构是数组 查询快 增删快 线程不安全 效率高 LinkedList 底层数据结构是链表 查询慢 ...
- Apache服务器性能如何优化
配置网站,要充分的把系统资源利用出去,榨干系统的一切潜能,让网站速度发挥到极致.Apache,是用户浏览和网站数据的一个中间桥梁.但是在这里,我们虽然做得并不是很多,但是如果心细打理,有些设置也会起到 ...
- 一次完整的HTTP请求与响应涉及哪些知识?
Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:Ruheng 地址:http://www.jianshu.com/p/c1d6a294d3c0 本文以HTTP请求和响 ...
- MyBatis的查询
MyBatis的查询 在上一个MyBatis的核心API中介绍了SqlSessionFactoryBuilder.SqlSessionFactory以及SqlSession是什么,它们都有什么作用,本 ...
- 一个很笨的方法,写脚本来实现自动调dmp,找有用的数据
很久很久以前用到的方法, 方法挺笨的,但是算是比较实用吧. 全自动的调试dmp,最后只要结果. 谁用得着就给谁看吧. 这里需要两个脚本 1:启动脚本,是一个批处理文件,用来启动调试器,来加载dmp和调 ...
- JConsole&VisualVM监控总结
简介JConsole(以下写作jconsole),VisualVM(以下写作jvisualvm ) 都是比较好的JVM调优工具,且都为JDK自带,可在命令行直接启动. 监控示例Server端(需要监控 ...
- git安装与上传
git安装与上传 上一篇 / 下一篇 2017-03-10 10:09:42 / 个人分类:代码管理工具 查看( 63 ) / 评论( 0 ) / 评分( 0 / 0 ) 1.安装Git-2.11. ...