上传文件

janus.uploadFile(Object options)

简介

上传文件

options参数

序号	名称	必填	类型	描述
1	buttonElement	是	dom元素	按钮元素
2	fileElement	是	dom元素	上传文件元素
3	fileType	否	正则表达式	上传文件类型
4	fileSize	否	数字	上传文件大小限制

请求返回参数

序号	名称	描述
1	datas.id	file id
2	datas.name	file name
2	datas.type	file type
2	datas.md5	file md5

示例代码

HTML代码

<div ng-controller="UploadController as ctrl">
    <div class="widget">
        <div class="widget-body">
            <div class="row">
               <div class="col-xs-12">
                   <div>
                       <input id="upload-file-input" type="file" accept="application/image" style="display: none"/>
                       <button class="btn btn-primary btn-outline btn-sm import-file-button" type="button">
                           <i class="fa fa-upload"></i>
                           上传图片
                       </button>
                       <button class="btn btn-primary btn-outline btn-sm" type="button" ng-click="ctrl.download()">
                           <i class="fa fa-download"></i>
                           下载当前文件
                       </button>
                   </div>
               </div>
            </div>
            <div class='row'>
               <div class="col-xs-12">
                   <img ng-src="{{imgFileURL}}" ng-if="imgFileURL">
               </div>
            </div>
        </div>
    </div>
</div>

JavaScript代码

define([], function () {
    var app = angular.module('app');

    app.controller('UploadController', ['$scope', 'janus','$element', function ($scope, janus,element) {
        var ctrl = this;
        _.extend(ctrl, {
            initialize: function () {
                ctrl.initUploadEvent();
            },
            initUploadEvent:function(){
                janus.uploadFile({
                        buttonElement: element.find('.import-file-button'), // 上传按钮
                        fileElement: element.find('#upload-file-input'), // 上传的表单元素
                        fileType: /image/, // 上传类型
                        fileSize: 64 * 1024 * 1024 // 文件大小
                    }).progress(function (result) {
                        $scope.imgFileId = _.get(result, "datas.id" );
                        $scope.imgFileURL = "gridfs/" + $scope.imgFileId;
                    });
            },
            download:function(){
                if(!$scope.imgFileId){
                    janus.showNotify("请上传文件!");
                }
                janus.downloadFile($scope.imgFileId);
            }
        });
        ctrl.initialize();
    }]);
})

运行效果