SwalUpload

SwalUpload是在Plupload插件基础上做的上传小工具，致力于让upload这件事变得更简单，包括文件上传到本地、oss、七牛等，这是一个跨语言的上传小工具。

目前只支持oss上传

使用教程(aliyun oss web直传模式上传文件)

载入swalupload.js

swalupload是基于jquery(jquery版本最好在1.9以上),所以在使用前，请先引入jquery

• 在head中加入

    <script src="../app/js/jquery-2.2.4.js"></script>
    <script src="../plupload/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="../dist/swalupload.js"></script>

• 以单文件上传为例

<!-- 文件队列显示层 -->
<div id="ossfile"></div>

<!-- 选择文件按钮和上传按钮 -->
<div id="container">
    <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
    <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>
</div>

• 调用swalupload上传

<script>
    $('#selectfiles').swalupload({
        postButton:'#postfiles', //提交按钮，当提交按钮为空时，则为自动上传
        rename:false, //是否需要重新命名上传文件
        multi:false, //是否需要单次多文件上传，默认一次只能上传文件
        FilesAdded:function (file) {//添加文件到文件队列层中
            $('#ossfile').append('<div id="' + file.id + '">' + file.name + ' (' + file.ratio + ')<b></b>'
                + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
                + '</div>');
        },
        UploadProgress:function (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 (file,info) {//上传完成后
            if (info.status == 200)
            {
                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + file.name;
            }
            else
            {
                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
            }
        },
        Error:function (msg) {//上传错误提示
            console.log(msg);
        }
    });
</script>

二次开发环境搭建

涉及到技术(技术栈)

• nodejs
• npm
• webpack
• Plupload

npm 安装开发环境

使用npm搭建开发测试环境,如果没有安装过npm的,可以跳过,此处为了进行二次开发准备的

• npm install

生产环境部署

生成压缩后的生产环境上可用的js文件

• npm run prod

开发环境部署

开发目录在app下，css目录为测试样式目录、js目录为swalupload的主目录、tpls目录为测试各种应用的模板目录

• npm run dev

热编译，改动js后自动生成测试文件，避免手动生成编译文件

• npm run watch