AngularJS 文件上传控件 ng-file-upload带进度条

最新推荐文章于 2024-06-24 09:46:05 发布

极地雪狼li

最新推荐文章于 2024-06-24 09:46:05 发布

阅读量4k

点赞数

分类专栏： web前端 angular2.x

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xuehu837769474/article/details/81127620

版权

angular2.x 同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

web前端

53 篇文章 20 订阅

订阅专栏

由于项目需要显示上传文件的进度条，而我们的项目前台用的是AngularJS 所以就在网上找了一个有关AngularJS上传的控件

ng-file-upload：https://github.com/danialfarid/ng-file-upload  这个为文件下载地址

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>文件上传</title>
    <meta charset="utf-8"/>
    <script src="JS/angular.min.js"></script>
    <script src="JS/ng-file-upload.min.js"></script>
    <script src="JS/ng-file-upload-shim.min.js"></script>
    <script>
        var app = angular.module('app', ['ngFileUpload']);
        app.controller('FileController', function ($scope, Upload) {
            $scope.uploadImg = '';
            //提交
            $scope.submit = function () {
                $scope.upload($scope.file);
            };
            $scope.upload = function (file) {
                $scope.fileInfo = file;
                Upload.upload({
                    //服务端接收
                    url: 'Ashx/UploadFile.ashx',
                    //上传的同时带的参数
                    data: {'username': $scope.username},
                    //上传的文件
                    file: file
                }).progress(function (evt) {
                    //进度条
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    //上传成功
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                    $scope.uploadImg = data;
                }).error(function (data, status, headers, config) {
                    //上传失败
                    console.log('error status: ' + status);
                });
            };
        });
    </script>
</head>

<body>
<form ng-controller="FileController">
    <img src="{{uploadImg}}"/>
    当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/>
    <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div>
    <button type="submit" ng-click="submit()">submit</button>
    {{fileInfo.name}}<br/>
    {{fileInfo.size}}
</form>
</body>

</html>

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

极地雪狼li

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 文件上传控件 ng-file-upload带进度条

由于项目需要显示上传文件的进度条，而我们的项目前台用的是AngularJS 所以就在网上找了一个有关AngularJS上传的控件ng-file-upload：https://github.com/danialfarid/ng-file-upload 这个为文件下载地址<!DOCTYPE html><html ng-app="app"><head&gt...
复制链接

扫一扫

专栏目录