JS oss操作

百度云下载

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.List"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>文件上传</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
    <center />
    <br>
    <br>
    <br>
    <h1>
        <font color="#FF0000">文件上传</font>
    </h1>
    <h3>
        <font color="#FF0000">一次只能上传一张图片,多选将默认上传第一张</font>
    </h3>
    <h5>
        <font color="#FF0000">请上传JPG、PNG格式的图片</font>
    </h5>
    <br>
    <script type="text/javascript">
        
    <%String path = (String) request.getParameter("path");
            String value = (String) request.getParameter("value");
            String src = (String) request.getParameter("src");
            String del = (String) request.getParameter("del");
            /* String a = (String) request.getParameter("a"); */
            String flag = (String) request.getParameter("flag");%>
        
    <%StringBuffer sb = new StringBuffer();
            Date date = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("yyMMdd");
            sb.append(sdf.format(date));
            String h = new SimpleDateFormat("HH").format(date);
            String m = new SimpleDateFormat("mm").format(date);
            String s = new SimpleDateFormat("ss").format(date);
            sb.append(h);
            sb.append(m);
            sb.append(s);
            for (int i = 0; i < 4; i++) {
                int index = (int) (Math.random() * 10);
                sb.append(index);
            }
            sb.append(".jpg");
            String imagename = sb.toString();%>
        
    <%/* request.setAttribute("that", that); */
            request.setAttribute("imagename", imagename);
            /* request.setAttribute("flag", flag); */
            request.setAttribute("path", path);
            request.setAttribute("value", value);
            request.setAttribute("src", src);
            request.setAttribute("del", del);
            /* request.setAttribute("a", a); */
            request.setAttribute("flag", flag);%>
        var path = "${path}"
        var imagename = "${imagename}"
        /* var flag = "${flag}" */
        var value = "${value}"
        var src = "${src}"
        var del = "${del}"
        /* var a = "${a}" */
        var flag = "${flag}"
    </script>
    <h4>您所选择的文件:</h4>
    <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5!</div>
    <br />
    <div id="container">
        <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a> <a
            id="postfiles" href="javascript:void(0);" class='btn'
            οnclick="javascript:aaa();">开始上传</a>
    </div>
    <pre id="console"></pre>
    <p>&nbsp;</p>
</body>
<script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="lib/base64.js"></script>
<script type="text/javascript"
    src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
</html>


upload.js

var policyText = {
    "expiration" : "2020-01-01T12:00:00.000Z", // 设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
    "conditions" : [ [ "content-length-range", 0, 1048576000 ] // 设置上传文件的大小限制
    ]
};
accessid = 'test';
accesskey = 'test';
host = 'http://miaozhuang.oss-cn-shanghai.aliyuncs.com';
/* var a = window.parent.document.getElementById("roomType").value; */

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);
var uploader = new plupload.Uploader(
        {
            runtimes : 'html5,flash,silverlight,html4',
            browse_button : 'selectfiles',
            container : document.getElementById('container'),
            flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
            silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
            url : host,
            multipart_params : {
                'Filename' : imagename,
                'key' : path + imagename,
                'policy' : policyBase64,
                'OSSAccessKeyId' : accessid,
                'success_action_status' : '200', // 让服务端返回200,不然,默认会返回204
                'signature' : signature,
            },

            filters : {
                mime_types : [ // 只允许上传图片和zip,rar文件
                {
                    title : "Image files",
                    extensions : "jpg,png,gif,jgeg,bmp,jpeg"
                }, {
                    title : "Zip files",
                    extensions : "zip,rar"
                } ],
                max_file_size : '80mb', // 最大只能上传10mb的文件
                prevent_duplicates : true
            // 不允许选取重复文件
            },

            init : {

                PostInit : function() {
                    document.getElementById('ossfile').innerHTML = '';
                    document.getElementById('postfiles').onclick = function() {
                        uploader.start();
                        return false;
                    };
                },
                FilesAdded : function(up, files) {
                    plupload
                            .each(
                                    files,
                                    function(file) {
                                        document.getElementById('ossfile').innerHTML += '<div id="'
                                                + file.id
                                                + '">'
                                                + file.name
                                                + ' ('
                                                + plupload
                                                        .formatSize(file.size)
                                                + ')<b></b>'
                                                + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
                                                + '</div>';
                                    });
                },

                UploadProgress : function(up, file) {
                    var d = document.getElementById(file.id);
                    d.getElementsByTagName('b')[0].innerHTML = '<span>'
                            + file.percent + "%</span>";

                    var prog = d.getElementsByTagName('div')[0];
                    var progBar = prog.getElementsByTagName('div')[0]
                    progBar.style.width = 2 * file.percent + 'px';
                    progBar.setAttribute('aria-valuenow', file.percent);
                },

                FileUploaded : function(up, file, info) {
                    // alert(info.status)
                    if (info.status >= 200 || info.status < 200) {
                        document.getElementById(file.id).getElementsByTagName(
                                'b')[0].innerHTML = 'success';

                        var url = 'http://miaozhuang.oss-cn-shanghai.aliyuncs.com/'
                                + path + imagename;
                        if (flag == 1) {
                            var s = '' + src;
                            var v = '' + value;
                            var d = '' + del;
//                            var a1 = '' + a;
                            // 秒装新闻单张主图
                            // if (flag == 1) {
                            if (imagename != null || imagename != '') {

                                window.opener.document.getElementById(v).value = '/'
                                        + path + imagename;
                                window.opener.document.getElementById(s).src = url;
                                window.opener.document.getElementById(d).style.display = 'inline';
//                                window.opener.document.getElementById(a1)
//                                        .removeAttr('disabled');
                                window.close();
                            }
                        } else if (flag == 2) {
                            window.opener.document.getElementById("imgb").innerHTML += "<div style='display:flex;align-items:center;justify-content:center;margin-left:2px;' class='fileupload-new thumbnail'><input type='hidden' name='images' value="
                                    + "/"
                                    + path
                                    + imagename
                                    + " class='form-control'/><img src='http://miaozhuang.oss-cn-shanghai.aliyuncs.com/"
                                    + path
                                    + imagename
                                    + "' width='100' class='img_mater'><a οnclick='dele(this)' class='btn btn-danger btn-xs'><i class='fa fa-trash'></i> 删除</a></div>"
                            if (window.opener.document
                                    .getElementsByClassName("img_mater").length >= 5) {
                                window.opener.document
                                        .getElementById("images_div").style.display = "none";
                                window.close();
                            }
                            setTimeout("window.close();", 2000);
                        } else if (flag == 3) {
                            window.opener.document.getElementById("imgb").innerHTML += "<div style='display:flex;align-items:center;justify-content:center;margin-left:2px;' class='fileupload-new thumbnail'><input type='hidden' name='pics' value="
                                    + "/"
                                    + path
                                    + imagename
                                    + " class='form-control'/><img src='http://miaozhuang.oss-cn-shanghai.aliyuncs.com/"
                                    + path
                                    + imagename
                                    + "' width='100' class='img_mater'><a οnclick='dele(this)' class='btn btn-danger btn-xs'><i class='fa fa-trash'></i> 删除</a></div>"
                            if (window.opener.document
                                    .getElementsByClassName("img_mater").length >= 5) {
                                window.opener.document
                                        .getElementById("images_div").style.display = "none";
                                window.close();
                            }
                            setTimeout("window.close();", 2000);
                        }

                        // }

                    } else {
                        document.getElementById(file.id).getElementsByTagName(
                                'b')[0].innerHTML = info.response;
                    }
                    window.close();
                },

                Error : function(up, err) {
                    if (err.code == -600) {
                        document.getElementById('console').appendChild(
                                document.createTextNode("\n选择的文件太大"));
                    } else if (err.code == -601) {
                        document.getElementById('console').appendChild(
                                document.createTextNode("\n选择的文件类型不对"));
                    } else if (err.code == -602) {
                        document.getElementById('console').appendChild(
                                document.createTextNode("\n这个文件已经上传过一遍了"));
                    } else {
                        document.getElementById('console').appendChild(
                                document.createTextNode("\nError xml:"
                                        + err.response));
                    }
                }
            }
        });

uploader.init();


阿里云 OSS(Object Storage Service)是一种云存储服务,而 Moment.js 是一个用于解析、验证、操作和显示日期和时间的 JavaScript 库。这两者之间并没有直接的关联。 Moment.js 是一个开源的 JavaScript 库,您可以在您的项目中使用 Moment.js 来处理日期和时间相关的操作。您可以通过以下步骤在您的项目中使用 Moment.js: 1. 下载 Moment.js:您可以从 Moment.js 的官方网站(https://momentjs.com/)上下载最新版本的 Moment.js 库,或者使用CDN链接直接引入。 2. 引入 Moment.js:将 Moment.js 文件引入到您的项目中。您可以通过在 HTML 文件的头部添加 `<script>` 标签来引入 Moment.js 文件,或者在使用模块化的 JavaScript 环境中使用相应的导入语句。 3. 使用 Moment.js:一旦成功引入 Moment.js,您就可以开始使用它来操作日期和时间。Moment.js 提供了丰富的 API,包括日期解析、格式化、计算、比较等功能。您可以参考 Moment.js 的官方文档和示例以了解如何使用各种功能。 需要注意的是,Moment.js 在2020年之后停止了维护,并且官方推荐使用类似 Day.js 或原生 JavaScript 的日期和时间相关 API。所以,在选择日期和时间处理库时,您也可以考虑其他现代化的替代方案。 至于与阿里云 OSS 的关联,您可以在使用 Moment.js 时,通过获取 OSS 中的对象的相关元数据,如最后修改时间等,然后使用 Moment.js 对日期和时间数据进行格式化和处理。但是,这两者并没有直接的集成或依赖关系。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会飞的蜗牛905

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值