【如何用angular file upload 插件中加入上传进度条 _file-upload 】

如何用angular file upload 插件中加入上传进度条

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

file-upload

详细描述

截图

代码

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

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-file-upload/2.5.0/angular-file-upload.js"></script>
</head>

<body ng-controller="AppController">
    <!--文件上传指令-->
    <input type="file" nv-file-select="" uploader="uploader" />
    <!--图片预览-->
    <img id="img-preview" ng-src="{{iconUrl}}">
</body>
<script>
    var app = angular.module('my-app', [ 'angularFileUpload' ]);
    app.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
      url: 'upload.php' //换成自己的上传地址，本地演示不换也行
    });
    uploader.onAfterAddingFile = function(fileItem) {
      var reader = new FileReader();
      reader.addEventListener("load", function (e) {
        //文件加载完之后，更新angular绑定
        $scope.$apply(function(){
          $scope.iconUrl = e.target.result;
        });
      }, false);
      reader.readAsDataURL(fileItem._file);
    };
}]);
</script>

</html>

编辑于2024-05-02

时间排序

热门排序

[深圳|结业弟子]JS-江雪茜
0

进度条功能被封装在指令里了。guithub有源码。https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview

查看全部>

编辑于2018-07-24

去第页