OSS Web直传 (文件图片)

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

<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>

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

原文链接:segmentfault.com

上一篇:支持Promise的Generator Runner
下一篇:2017年 JavaScript 框架回顾 -- 后端框架

相关推荐

官方社区

扫码加入 JavaScript 社区