ng-file-upload-Angular上传图片插件

作者：高天阳

邮箱：[email protected]

更改历史

* 2017-11-26    高天阳    初始化文档

1 简介、特点

1.1 简介

ng-file-upload是一款轻量级、跨浏览器的angular上传文件指令

1.2 特点

1. 支持文件上传进度条、取消、暂停
2. 支持文件拖放和黏贴图像
3. 支持暂停和取消文件上传
4. 支持验证文件的类型 / 大小、图像宽度 / 高度、视频 / 音频持续时间（ng-required）
5. 支持预览显示选择的图像、视频、音频
6. 支持CORS和直接上传文件的二进制数据( Upload.$http() )

2 安装、使用

2.1 安装

• Npm安装

npm install ng-file-upload --save

• Bower安装

bower install ng-file-upload --save

2.2 引入依赖

引入ng-file-upload

//inject directives and services. 
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar 
    $scope.submit = function() {
      if ($scope.form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // upload on file select or drop 
    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
    // for multiple files: 
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers: 
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);

2.3 使用

在页面插入上传按钮

调用上传接口(把图片对象上传后台)

3 涉及参数：

• 文件选择：----适用于：<button>、<div>、<input　type=file>

ngf-validate="{
     size: {min: 10, max: '20MB'},
     width: {min: 100, max:10000}, 
     height: {min: 100, max: 300}, 
     duration: {min: '10s', max: '5m'}, 
     accept: '.jpg'
 }" //  或者 "validate($file)"

• 文件删除：----适用于：<button>、<div>

注：除了ngf-drop 、ng-model 、 ngf-change之一，其余属性都是可选的

ngf-validate="{
     size: {min: 10, max: '20MB'},
     width: {min: 100, max:10000}, 
     height: {min: 100, max: 300}, 
     duration: {min: '10s', max: '5m'}, 
     accept: '.jpg'
 }" //  或者 "validate($file)"

ngf-drag-over-class="{
    accept:'acceptClass', 
    reject:'rejectClass', 
    delay:100
}" //or "myDragOverClass" or "calcDragOverClass($event)" 
//拖动css类行为：可以是一个字符串，也可以是一个函数（返回一个类名）或者是一个json对象
{accept: 'c1', reject: 'c2', delay:10}，默认是 "dragover".  accept和reject只可以在chrome浏览器
并且要通过ngf-accept的检测才可以工作，

• 文件预览-----适用于<img/>、<audio>、<video>

参考资料

• 简书教程
• ng-file-upload教程
• CSDN教程
• Npm官方介绍