AngularJs异步文件上传

最新推荐文章于 2021-04-07 10:55:50 发布

weixin_33859665

最新推荐文章于 2021-04-07 10:55:50 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2324376/blog/386122

本文介绍了一个基于Angular的文件上传组件的使用方法，包括如何通过Angular指令和服务实现文件选择、拖放上传等功能，并提供了完整的示例代码。

2019独角兽企业重金招聘Python工程师标准>>>

作者更新得似乎挺勤快的，先预览下代码：

<script src="angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="angular-file-upload-shim.min.js"></script> 
<script src="angular-file-upload.min.js"></script> 

<div ng-app="fileUpload" ng-controller="MyCtrl">
    watching model:
    <div class="button" ng-file-select ng-model="files">Upload using model $watch</div>
    <div class="button" ng-file-select ng-file-change="upload($files)">Upload on file change</div>
    Drop File:
    <div ng-file-drop ng-model="files" class="drop-box" 
        drag-over-class="dragover" ng-multiple="true" allow-dir="true"
        accept=".jpg,.png,.pdf">Drop Images or PDFs files here</div>
    <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
</div>
```
```javascript
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['angularFileUpload']);

app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                $upload.upload({
                    url: 'upload/url',
                    fields: {'username': $scope.username},
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                });
            }
        }
    };
}]);
```
详细用法请移步至作者的GitHub页面：[https://github.com/danialfarid/ng-file-upload](https://github.com/danialfarid/ng-file-upload)

转载于:https://my.oschina.net/u/2324376/blog/386122