当前位置: 首页 > news >正文

OSS Web直传 (文件图片)

废话不多说直接上代码:(看到的一篇php上传博客,进行的修改完善)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .filePicker {
            margin: 50px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background: -webkit-gradient(linear, 10 10, 90% 100%, from(#ff8c00), to(#ff5500));
        }
        
        .filePicker label {
            display: block;
            width: 100%;
            height: 100%;
        }
        
        .filePicker input[type="file"] {
            display: none;
        }
        
        .preview_box img {
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div id="sign" style="text-align: center;">ossweb直传</div>
    <div class="filePicker">
        <input id="img_input" type="file" accept="image/*" />
        <label for="img_input">上传图片</label>
    </div>
    <div class="preview_box">

    </div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="js/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="js/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="js/lib/base64.js"></script>
<script type="text/javascript">
    var policyText = {
        "expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
        "conditions": [
            ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
        ]
    };
    accessid = '你的id';
    accesskey = '你的key';
    host = '你的oss路径';
    var policyBase64 = Base64.encode(JSON.stringify(policyText));
    message = policyBase64;
    var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
        asBytes: true
    });
    var signature = Crypto.util.bytesToBase64(bytes);

    $("#img_input").on("change", function(e) {
        var file = e.target.files[0]; //获取图片资源
        var filename = file.name;
        // 只选择图片文件
        if(!file.type.match('image.*')) {
            return false;
        }
        var ossData = new FormData();
        // 先请求授权,然后回调
        var timestamp3 = new Date().getTime(); //时间磋 
        var json = new Object;
        json.accessid = accessid;
        json.policy = policyBase64;
        json.signature = signature;
        json.key = timestamp3;
        // 添加配置参数
        ossData.append('OSSAccessKeyId', json.accessid);
        ossData.append('policy', json.policy);
        ossData.append('Signature', json.signature);
        ossData.append('key', json.key);
        ossData.append('success_action_status', 201); // 指定返回的状态码
        ossData.append('file', file, timestamp3);
        $.ajax({
            url: host,
            data: ossData,
            dataType: 'xml', // 这里加个对返回内容的类型指定
            processData: false,
            contentType: false,
            type: 'POST'
        }).done(function(data) {
            console.log(data);
            // 返回的上传信息
            if($(data).find('PostResponse')) {
                var res = $(data).find('PostResponse');
                console.info('Bucket:' + res.find('Bucket').text());
                console.info('Location:' + res.find('Location').text());
                console.info('Key:' + res.find('Key').text());
                console.info('ETag:' + res.find('ETag').text());
            }
            // 图片预览
            var img = new Image();
            img.src = res.find('Location').text();

            img.onload = function() {
                $(".preview_box").append(img);
            };
        });
    });
</script>

</html>

注:这里的oss信息都是前端写进去的非常不推荐,一定要和后端对接(签名,id ,key 这些东西);
当然,crypto.js hmac.js sha1.js base64.js 这些都是可以不用引入的。当然我们的demo是没有后端配合的。
但是,这里还是为大家提供加密的链接 crypto.js http://blog.csdn.net/wangcunh...
(有问题大家一起讨论,欢迎评论,点赞,收藏)。

相关文章:

  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 浅谈RxJava
  • android studio 3.0 Ndk 开发- 利用增量更新进行 apk的覆盖安装
  • Teamviewer原理和阻止方法
  • 【BIEE】11_根据显示指标展示不同报表
  • 流程(上)
  • 好领导:提升领导威信力的110个管理奥秘
  • 我的重构第二步
  • 部署eolinker开源版接口管理
  • 基于django的生成二维码的接口
  • 09-移动端开发教程-Sass入门
  • while循环按行读文件的方式总结
  • ElasticSearch「1」本地安裝Elasticsearch 6.0.1 + Elasticsearch-head插件
  • 2018/02/09
  • PhysicsBasedAnimation学习
  • 网络传输文件的问题
  • C++入门教程(10):for 语句
  • create-react-app做的留言板
  • echarts花样作死的坑
  • gulp 教程
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • Java超时控制的实现
  • jquery ajax学习笔记
  • node-glob通配符
  • 从零开始学习部署
  • 构造函数(constructor)与原型链(prototype)关系
  • 理解在java “”i=i++;”所发生的事情
  • 深入浏览器事件循环的本质
  • 微信小程序上拉加载:onReachBottom详解+设置触发距离
  • 用 Swift 编写面向协议的视图
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • 容器镜像
  • #NOIP 2014# day.2 T2 寻找道路
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (39)STM32——FLASH闪存
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (floyd+补集) poj 3275
  • (vue)页面文件上传获取:action地址
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (二)Linux——Linux常用指令
  • (篇九)MySQL常用内置函数
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • .aanva
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .net解析传过来的xml_DOM4J解析XML文件
  • .NET框架设计—常被忽视的C#设计技巧
  • @staticmethod和@classmethod的作用与区别
  • [ASP]青辰网络考试管理系统NES X3.5
  • [BZOJ 3531][Sdoi2014]旅行(树链剖分+线段树)
  • [bzoj1901]: Zju2112 Dynamic Rankings
  • [C#][opencvsharp]opencvsharp sift和surf特征点匹配
  • [IE编程] IE8 新增的C++开发接口