图片上传到七牛云及图片上传进度条

七牛云存储是一个集图片、视频对象存储为一体的网站。并且他上面集成了cdn加速服务，图片处理（加水印，图片裁剪）等功能，对于一些想要快速开发产品，不想花大量时间来构建自己资源服务器的中小型公司而言，无疑是最好的选择。更主要是有免费额度。

申请七牛云账号

申请链接：https://portal.qiniu.com ,申请步骤不做过多阐述。
查看密钥：个人中心-> 密钥管理（AK、SK）
创建空间：进入对象存储-> 新建存储空间（自定义空间名称、选择存储区域、设置为公开空间）
绑定域名：七牛默认提供的域名只有30天试用时间，建议更换为自己的域名(需备案),设置后将此域名解析到生成的cname，后续访问即可通过此域名访问到图片。

图片上传到七牛云

代码

在模板中引入最新版(2.5.2)的JavaScript SDK

# html
# 引入最新版的JavaScript SDK
<script src="https://unpkg.com/qiniu-js@2.5.2/dist/qiniu.min.js"></script>
# 简单上传界面
<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
        <span class="input-group-btn">
            <label class="btn btn-default btn-file">
                上传图片<input hidden type="file" class="btn btn-default" id="thumbnail-btn">
            </label>
        </span>
    </div>
</div>

然后监听一个type=file类型的按钮的change事件，一旦选择了文件，那么就会执行change事件，在change事件的处理函数中，我们就可以获取到当前选中的文件。然后通过七牛的SDK发送给服务器。

# js
function News() {
    var self = this;
    self.progressGroup = $("#progress-group");
    self.progressBar = $(".progress-bar");
}

News.prototype.listenQiniuUploadFileEvent = function () {
    var self = this;
    var thumbnailBtn = $('#thumbnail-btn');
    thumbnailBtn.change(function (event) {
        var file = this.files[0];
        xfzajax.get({
            'url': '/cms/qntoken/',
            'success': function (result) {
                var token = result['uptoken'];
                var key = (new Date()).getTime() + '.' + file.name.split('.')[1];
                var putExtra = {
                    fname: key,
                    params: {},
                    mimeType: ['image/png','video/x-ms-wmv','image/jpeg']
                };
                var config = {
                    useCdnDomain: true,
                    retryCount: 6,
                    region: qiniu.region.z2
                };
                var observable = qiniu.upload(file, key, token, putExtra,config);
                observable.subscribe({
                    "next":self.updateUploadProgress,
                    "error":self.uploadErrorEvent,
                    "complete": self.complateUploadEvent
                });
                self.progressGroup.show();
            }
        });
    });
};

News.prototype.updateUploadProgress = function (response) {
    var self = this;
    var total = response.total;
    var percent = total.percent;
    var percentText = percent.toFixed(0) + '%';
    var progressBar = $(".progress-bar");
    progressBar.css({"width":percentText});
    progressBar.text(percentText);
};

News.prototype.uploadErrorEvent = function (error) {
    window.messageBox.showError(error.message);
};

News.prototype.complateUploadEvent = function (response) {
    var self = this;
    var filename = response['key'];
    var domain = "http://img.key***.cn/";
    var thumbnailUrl = domain + filename;
    var thumbnailInput = $("#thumbnail-form");
    thumbnailInput.val(thumbnailUrl);
    var progressGroup = $("#progress-group");
    progressGroup.hide();
};

上传进度条Demo

通过进度条，灵活的为当前工作流程或动作提供实时反馈。

https://v3.bootcss.com/components/#progress

效果图
mark
mark

代码

前端部分

# html
<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
        <span class="input-group-btn">
            <label class="btn btn-default btn-file">
                上传图片<input hidden type="file" class="btn btn-default" id="thumbnail-btn">
            </label>
        </span>
    </div>
</div>
<div id="progress-group" class="form-group" style="display: none;">
    <div  class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            0%
        </div> #内容起始设置为0%，这样初始上传时就只从0开始
    </div>
</div>

# js
// 上传函数、进度条显示
News.prototype.handleFileUploadProgress = function (response) {
    var total = response.total;
    var percent = total.percent;
    var percentText = percent.toFixed(0)+'%';
    // 24.0909，89.000....
    var progressGroup = News.progressGroup;
    // undefined/None
    progressGroup.show();
    var progressBar = $(".progress-bar");
    progressBar.css({"width":percentText});
    progressBar.text(percentText);
};