AngularJS 文件上传控件 ng-file-upload

来源：互联网发布：托福tpo模考软件 mac 编辑：程序博客网时间：2024/04/25 20:14

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

1 2