<!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. php获取指定日期的前一天，前一月，前一年日期

    ## php获取指定日期的前一天,前一月,前一年日期   前一天的日期为: date("Y-m-d",strtotime("-1 days",strtotime ...

  2. C#6.0语言规范(十六) 异常

    C#中的异常提供了一种结构化,统一且类型安全的方法来处理系统级和应用程序级错误条件.C#中的异常机制与C ++的异常机制非常相似,但有一些重要的区别: 在C#中,所有异常必须由派生自的类类型的实例表示 ...

  3. AndroidStudio -- AndroidStuido中找不到cache.properties文件

    AndroidStuido中找不到cache.properties文件 报错信息: 16:32:10 Gradle sync failed: C:\Users\***\.gradle\caches\2 ...

  4. Redhat/CentOS 制作本地yum源

    一.制作本地yum源的场景有: (1) 操作系统ISO文件是通过光驱读取的 (2) 操作系统ISO文件是通过USB设备挂载的 (3) 操作系统ISO文件是被上传到本地文件夹的形式 二. 这3种配置方式 ...

  5. K-means算法的原理、优缺点及改进(转)

    文章内容转载自:http://blog.csdn.net/sinat_35512245/article/details/55051306                                ...

  6. Flyweight享元模式(结构型模式)

    1.面向对象的缺点 虽然OOP能很好的解决系统抽象的问题,并且在大多数的情况下,也不会损失系统的性能.但是在某些特殊的业务下,由于对象的数量太多,采用面向对象会给系统带来难以承受的内存开销.示例代码如 ...

  7. idea 运行scala代码 报错：Exception in thread "main" java.lang.NoClassDefFoundError: scala/Predef$ java.lang.NoClassDefFoundError: scala/Function0 Error: A JNI error has occurred, please check your installati

    各种报错信息如下: java.lang.NoClassDefFoundError: scala/Function0 at java.lang.Class.getDeclaredMethods0(Nat ...

  8. Silverlight中使用MVVM(2)-(提高)

    在第一篇文章中的示例中,我们已经简单的了解了应用MVVM模式的流程,我的本意是你已经了解了一点MVVM的概念,然后又没有一个较好的例子学习,可以跟着我一起学习MVVM模式,所以这个部分,都是没有理论知 ...

  9. postgresql逻辑结构--触发器（三）

    触发器(tigger)是一种由事物自动触发执行的特殊存储过程,这些事件可以是对一个表进行INSERT.UPDATE.DELETE等操作. 一.创建触发器 create   [ constraint ] ...

  10. AssemblyInfo.cs 详解

    前言 ? .net工程(包括Web和WinForm)的Properties文件夹下自动生成一个名为AssemblyInfo.cs的文件,一般情况下我们很少直接改动该文件.但我们实际上通过另一个形式操作 ...