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

旧城等待， 2022-05-19 04:13 266阅读 0赞

由于项目需要显示上传文件的进度条，而我们的项目前台用的是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>

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220519/67e8f483a23a48cbbbb3d26c29b4c69f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220519/b3c0336ba1fb4630893c5a6af27ec40b.png