井井客

搜索

七牛云JS上传文件DEMO

根据七牛云存储上传文件制作的一个简化版代码,仔细看,你会发现上传文件在这里真的很简便,也会生出“原来如此”的感觉,用JS就能做到这一步,体验还是不错的。

七牛云JS上传文件DEMO

实现效果需要依赖plupload上传插件,以及qiniu.js。这两个文件可以在http://www.jingjingke.com/web/qiniu/plupload+qiniu.rar获取到。

参考的七牛实例地址是:http://jssdk.demo.qiniu.io。另外运行时需要用到uptoken,这是有实效性的,在复制出代码的时候需要将这个值换成最新的,可以在http://jssdk.demo.qiniu.io/uptoken这个地址中获取到。

我的完整的代码如下:

<!doctype html>
<html>
    <meta charset="utf-8">
    <title>七牛云JS上传文件DEMO</title>
    <style>
        *{padding:0;margin:0;list-style:none}
        body{font-size:14px}
        .upload-btns{padding-top:40px;text-align:center}
        .upload-select{display:inline-block;padding:0 20px;line-height:24px;background:#f2f2f2;border:1px solid #eee;border-radius:6px;cursor:pointer}
        .upload-info{font-size:12px;color:#666;display:inline-block;margin:0 10px}
        .upload-submit{display:block;height:36px;width:200px;margin:20px auto 0;cursor:pointer}
        .upload-percent{color:#999;font-size:12px;height:2em;line-height:2em}
        .show-result{text-align:center}
        .show-result h1{font-size:18px;padding:20px 0 20px}
        .show-list{padding:0 50px}
        .show-list li{line-height:3em;border-bottom:1px solid #e8e8e8}
    </style>
    </head>
    <body>
        <div class="upload-btns">
            <span id="pickfiles" class="upload-select">选择文件</span>
            <span class="upload-info"></span>
            <button class="upload-submit">点击上传</button>
            <span class="upload-percent"></span>
        </div>
        <div class="show-result">
            <h1>上传后的文件列表</h1>
            <ul class="show-list"></ul>
        </div>
        <script type="text/javascript" src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
        <script type="text/javascript" src="js/qiniu.min.js"></script>
        <script type="text/javascript" src="js/plupload.full.min.js"></script>
        <script>
            //上传时需要用到uptoken可以从“http://jssdk.demo.qiniu.io/uptoken”这个网址中获取
            var $showList = $('.show-list');
            var $uploadInfo = $('.upload-info');
            var $uploadSubmit = $('.upload-submit');
            var $uploadPercent = $('.upload-percent');
            var $uploader, $file = '',
                $temp = [];
            //设置上传文件名称-开始
                function setUploadInfo(status, value) {
                    if(status) {
                        $uploadInfo.text(value)
                    } else {
                        $uploadInfo.text('未选择任何文件')
                    }
                }
                //初始化
                setUploadInfo(false)
            //设置上传文件名称-结束

            //初始化上传文件插件
            $uploader = Qiniu.uploader({
                runtimes: 'html5,html4',
                browse_button: 'pickfiles',
                uptoken: 'xozWSPMxkMjIVoHg2JyXq4-7-oJaEADLOKHVR0vU:erYmG6qbL7wLMgx2mWAfOO81neo=:eyJkZWxldGVBZnRlckRheXMiOjcsInNjb3BlIjoianNzZGsiLCJkZWFkbGluZSI6MTUwOTY3NTYzOX0=', //需要先获取这个token
                domain: 'http://qiniu-plupload.qiniudn.com/',
                get_new_uptoken: false,
                max_file_size: '50mb',
                max_retries: 3,
                multi_selection: false,
                dragdrop: false,
                chunk_size: '4mb',
                auto_start: false,
                init: {
                    'FilesAdded': function(up, files) {
                        //选择文件后进行操作
                        setUploadInfo(true, "你选择了“ " + files[0].name + " ”")
                        $file = files[0].name;
                    },
                    'BeforeUpload': function(up, file) {
                        //上传之前可能的操作
                    },
                    'UploadProgress': function(up, file) {
                        $uploadPercent.text('上传中-' + file.percent + '%')
                    },
                    'FileUploaded': function(up, file, info) {
                        $uploadPercent.text('');
                        $temp.push(file.name);
                        $showList.prepend('<li>http://7xocov.com1.z0.glb.clouddn.com/' + file.name + '</li>')
                    },
                    'Error': function(up, err, errTip) {
                        //如果报错可能的操作
                        console.log(err)
                    }
                }
            })
            
            //点击图片上传按钮-开始
            $uploadSubmit.on('click', function() {
                if($file === '') {
                    //判断选择的文件是否为空
                    alert('请选择你要上传的文件!')
                } else {
                    //判断在这个列表中是否已经有同一个文件名
                    for(let i = 0; i < $temp.length; i++) {
                        if($file === $temp[i]) {
                            alert('列表中已经上传了该文件')
                            return false;
                        }
                    }
                    //执行上传命令
                    $uploader.start()
                }
            })
            //点击图片上传按钮-结束
        </script>
    </body>
</html>

这样就能基本完成一个上传图片的效果了。

我的代码中也有一些注释,而想知道更多的API可以去官网https://developer.qiniu.com/kodo/sdk/1283/javascript查看

另外对代码有不清楚或觉得错误的地址欢迎给我提意见~

文章TAG:js

作者:井井客原创来源:原创
本文标题:七牛云JS上传文件DEMO
本文链接:http://www.jingjingke.com/c/03306.html

上一篇:【微信小程序】将富文本解析为rich-text支持的JSON格式
下一篇:利用伪类制作凸起的背景带边框

文章分类

相关阅读

随便看看