部分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方式 上传图片、文件的更多相关文章

  1. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  2. ajax方式下载文件

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

  3. oss web直传

    签名信息 auth.php <?php function gmt_iso8601($time) { $dtStr = date("c", $time); $mydatetim ...

  4. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  5. ajax方式上传图片到Django后台

    参考价值最大 https://blog.csdn.net/huangql517/article/details/81259671 https://www.cnblogs.com/chenjianhon ...

  6. web前端 ajax请求上传图片数据类型处理

    form: function (url, paras, files, success) {//上传的文件类型是MultipartFile[]//如果把需要的参数直接传入,则会请求错误//设置请求参数的 ...

  7. Jquer + Ajax 制作上传图片文件

    没什么 说的  直接 上代码 //选择图片并上传 function selectImg(node){ var f = node.value; var file = node.files[0]; if( ...

  8. django 的 ajax 方式上传图片

    页面代码: <html>     <!-- 引入相关的js文件,相对路径  -->     <script type="text/javascript" ...

  9. ajax方式提交文件到后台同时加其他参数

    struts2后台Action方法,直接用参数成员变量对象的属性接收即可

随机推荐

  1. LeetCode 327. Count of Range Sum

    无意看到的LeetCode新题,不算太简单,大意是给一个数组,询问多少区间和在某个[L,R]之内.首先做出前缀和,将问题转为数组中多少A[j]-A[i] (j>i)在范围内. 有一种基于归并排序 ...

  2. tcptump的使用------使用JAVA与tcpdump从网络获取原始数据

    从这里开始,就开始接触使用分布式系统处理大数据了.在处理大数据之前,需要有一个场景,否则技术工具无法嵌入现实当中,价值就会降低.我碰到的场景应该还是比较具有普遍性,因此大家可以在我的场景里先玩一遍,熟 ...

  3. Java中的多线程Demo

    一.关于Java多线程中的一些概念 1.1 线程基本概念 从JDK1.5开始,Java提供了3中方式来创建.启动多线程: 方式一(不推荐).通过继承Thread类来创建线程类,重写run()方法作为线 ...

  4. linux 安装memcached C/C++使用libmemcached库(续)

    #include <iostream> #include <string> #include <libmemcached/memcached.h> using na ...

  5. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 C - Monkey and Banana

    https://vjudge.net/contest/68966#problem/C [参考]http://blog.csdn.net/qinmusiyan/article/details/79862 ...

  6. Vue项目的部署

    通过vue-cli创建的工程,默认已经打好了基础,包含vue-loader webpack. 通常我们开发中,使用npm run dev进行开发,webpack会Hot reload,不用我们手动刷新 ...

  7. 1012 u Calculate e

    A simple mathematical formula for e iswhere n is allowed to go to infinity. This can actually yield ...

  8. react native 升级到0.31.0的相关问题 mac Android Studio开发环境

    报错Caused by: java.lang.ClassCastException: android.app.Application cannot be cast to com.facebook.re ...

  9. Java中File

    1.什么是流? Java中的流是个抽象的概念,当程序需要从某个数据源读入数据的时候,就会开启一个数据流,数据源可以是文件.内存或网络等等.2.使用File类操作文件或目录属性 public class ...

  10. C# 文件上传(可以多文件上传)

    一.前端搭建 1.前端用到js:uploadify(下载地址:http://www.uploadify.com/download/).layer (下载地址:http://layer.layui.co ...