@ntesmail/shark-angularjs/src/main/webapp/examples/components/fileupload-markup.html

shark-angularjs组件库，基于shark-ui打造的angular组件库

<style type="text/css">
    .myfileupload {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background-color: #4a9ce2;
        color: #ffffff;
        border-radius: 10px;
        font-size: 14px;
        cursor: pointer;
    }
</style>
<div ng-controller="DemoFileuploadCtrl">{{myfileupload.name}}
    <sharkfileupload ng-model="myfileupload" class="myfileupload" name="fileupload" accept="'image/jpg,image/jpeg'" dragable="true"
        autoupload="false" on-selected="onSelected" on-uploading="onUploading" on-uploaded="onUploaded" on-failed="onFailed">
        {{filename?filename:'请选择文件'}}
    </sharkfileupload>
    <hr/>
    <button class="btn btn-success" ng-click="upload();">开始上传</button>
</div>
<script type="text/javascript">
    angular.module('demoApp')
        .controller('DemoFileuploadCtrl', ['$scope', function ($scope) {
            $scope.filename = null;
            $scope.onSelected = function (file) {
                $scope.filename = file.name;
                console.log(arguments);
            };
            $scope.onUploading = function (file, percent) {
                console.log(arguments);
            };
            $scope.onUploaded = function (file, res) {
                alert('上传成功');
            };
            $scope.onFailed = function (file, error) {
                console.log(arguments);
            };
            $scope.upload = function () {
                $scope.fileupload.upload('/xhr/file/upload.do', {
                    id: 1,
                    name: 'test'
                });
            };
        }]);

</script>