<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阿里云上传图片</title>
<style>
#imgBox{
width:100%;
height: 100%;
border:1px solid #000;
}
.upDateImg{
height: 150px;
}
</style>
</head>
<body>
<input type="file" id="file" />
<div id="imgBox"></div>
</body>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
<script>
var client;
var file;
$.ajax({
type:"post",
url:"http://oss.beibeiyue.com/oss/getOSSToken",
data:{
type:1
},
dataType:"json",
success:function(res){
var bucket = 'ylbb-business';
var region = 'oss-cn-beijing'; //申请oss服务时的区域
if(res.result == 0){
client = new OSS.Wrapper({
region: region,
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
stsToken: res.data.securityToken,
bucket: bucket
});
}
},
fail:function(){
mui.toast("网络连接失败,请稍后再试")
}
}); document.getElementById('file').addEventListener('change', function (e) {
file = e.target.files[0];
//采用时间戳重命名
var last=file.name.substr(file.name.lastIndexOf("."),file.name.length)
var fileName=Date.parse(new Date()) + last;
client.multipartUpload(fileName, file, {}).then(function(res) { //参数fileName为图片名称,参数file为图片
//上传成功后的图片地址
var fileUrl = res.url ? res.url : 'http://'+ res.bucket + '.oss-cn-beijing.aliyuncs.com/' + res.name;
console.log(fileUrl)
//上传成功
var picture=document.createElement("img");
picture.setAttribute("class","upDateImg")
picture.src=fileUrl
$("#imgBox").append(picture);
//删除
$("img").on("click",function(){
console.log(this)
$(this).remove()
})
}, function() {
console.log('上传文件失败','warning');
})
});
</script>
</html>

multipartUpload上传图片到阿里云的更多相关文章

  1. vue 上传图片到阿里云(前端直传:不推荐)

    为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行) 代码部分: <template> <div class="upLoad"> < ...

  2. 上传图片到阿里云OSS和获取上传图片的外网url的步骤

    啥都不说  直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" ...

  3. swift3.0 从相册选取或者拍照上传图片至阿里云OSS

    导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...

  4. vue中上传图片至阿里云oss

    1.开通阿里云的oss服务这些这里就不多做介绍了 2.登入阿里云的后台管理系统创建一个Bucket 3.在后台管理系统中进入访问控制 4.点击用户管理->新建用户->填写相关信息,就生成了 ...

  5. Java中使用RestFul接口上传图片到阿里云OSS服务器

    1.接口方法 import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.springfr ...

  6. 压缩并上传图片到阿里云(jfinal)

    /** * 获取上传文件 * * @param r * @Return: com.oreilly.servlet.multipart.FilePart */public static FilePart ...

  7. 上传图片到阿里云oss

    阿里云地址 登录阿里云管理控制台,创建对象存储oss private static final String endpoint = "http://oss-cn-shanghai.aliyu ...

  8. TP框架上传图片至阿里云oss

    首先安装阿里云oss扩展: composer require aliyuncs/oss-sdk-php 如果这个安装不上可以直接下载SDK的包: 链接:https://pan.baidu.com/s/ ...

  9. PHP上传图片至阿里云

    <?php header("Content-type: text/html; charset=utf-8"); header('Access-Control-Allow-Or ...

随机推荐

  1. [JavaScript] iframe更改了src后,父页面history.back只能后退iframe而不能使自己后退解决办法

    浏览器的机制如此,在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航. 有一种解决方案是不要修改iframe.src,而是删除旧iframe元素,新建一个iframe元 ...

  2. Info - Get technical information from the Internet

    Official Sites Overview / QuickStart Guide / Docs / E-books Community / Fourm / Blog Demo / Download ...

  3. 精通CSS 第1章

    一 标记简史 1 使用有意义的元素 2 ID和类名:ID是唯一的,而一个类名可以应用于多个元素.在写ID和类名时需要注意区分大小写,并使用统一的命名约定,比如完全小写+连字符分割,例andy-budd ...

  4. POJ 2421

    #include<iostream> #include<stdio.h> #define MAXN 500 #define inf 100000000 using namesp ...

  5. java中连接各种数据的方法

    1.oraclethin驱动连接字符串:jdbc:oracle:thin:用户名/密码@localhost:1521:cake驱动类:oracle.jdbc.driver.OracleDriver 2 ...

  6. Centos 7 安装 Redis 3.2

    环境: Centos 7 GCC            #未安装,使用yum install gcc安装 1.下载redis 官方下载网站:https://redis.io/download.请在页面 ...

  7. python实战问题记录

    开发环境搭建 1.安装aiohttp这个异步的http框架失败 提示使用pip更高版本,但是更新之后,还是无法使用.所以,我们采用anaconda中的aiohttp,即打开anaconda,然后进入E ...

  8. Android入门学习总结

    1.Manifest.xml是程序运行时读取的文件,是核心的配置文件:也是从中读取Activity 2.主要的代码文件存放在MainActivity.java,里面固定会有onCreate函数会通过s ...

  9. 磁盘分区以及Linux目录挂载详解

    一.背景 一直以来,对于磁盘的分区以及Linux目录挂载的概念都不是很清晰,现在趁着春暖花开周末在家没事就研究了下它们,现在来分享我的理解. 二.概念详解 1.磁盘分区 磁盘分区是把物理的磁盘空间按照 ...

  10. 获取Javascript 滚动条距离顶部的距离(兼容IE6+,火狐,谷歌,其它没测)

    document.body.scrollTop || document.documentElement.scrollTop