angular-file-upload插件的使用简单介绍

参考博客: https://www.cnblogs.com/jarson-7426/p/5191156.html

angular-file-upload

最近一段时间用了一下angular-file-upload的使用， 这里做简单的介绍.

angular-file-upload的github地址:  https://github.com/nervgh/angular-file-upload

惯例，首先贴出这个插件的github地址：点这里

这是插件的api使用文档地址：点这里

这是官方使用插件编写的例子：点这里

例子中能够找到我们需要的文件。例子中的es5-shim.min.js文件是为老的浏览器兼容而引入的，所以这个插件真的很强大呀。

---

然后我们来一步步使用这个插件来实现文件上传的功能吧。

这个插件定义了几个指令：nv-file-drop、nv-file-select、uploader

从单词意思来看应该不难猜出，第一个支持文件脱拽选择，第二个是点击选择，uploader用于绑定在控制器中新建的upload对象。

html文件

<form class="form-horizontal" name="form">
    <div class="form-line">
        <label>请选择证书文件：</label><span class="small-tip">证书文件只支持.pem格式，文件大小1M以内</span>
        <div class="choose-file-area">
            <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
            <a href="javascript:;" class="choose-book">
                <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览
            </a>
        </div>
    </div>
    <div class="form-line">
        <label>请选择私钥文件：</label><span class="small-tip">私钥文件只支持.key格式，文件大小1M以内</span>
        <div class="choose-file-area">
            <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
            <a href="javascript:;" class="choose-key">
                <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>浏览
            </a>
        </div>
    </div>
    <button type="submit" ng-click="UploadFile()">提交</button>
</form>

首先，注意这里需要上传两个文件，所以我创建两个upload对象，方便管理文件和处理回调函数。最后给上传按钮一个点击事件，同时处理两个对象的上传事件。

控制器文件

var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
    $scope.uploadStatus = $scope.uploadStatus1 = false; //定义两个上传后返回的状态，成功获失败
    var uploader = $scope.uploader = new FileUploader({
        url: 'upload.php',
        queueLimit: 1,     //文件个数
        removeAfterUpload: true   //上传后删除文件
    });
    var uploader1 = $scope.uploader1 = new FileUploader({
        url: 'upload.php',
        queueLimit: 1,
        removeAfterUpload: true
    });
    $scope.clearItems = function(){    //重新选择文件时，清空队列，达到覆盖文件的效果
        uploader.clearQueue();
    }
    $scope.clearItems1 = function(){
        uploader1.clearQueue();
    }
    uploader.onAfterAddingFile = function(fileItem) {
        $scope.fileItem = fileItem._file;    //添加文件之后，把文件信息赋给scope
    };
    uploader1.onAfterAddingFile = function(fileItem) {
        $scope.fileItem1 = fileItem._file;    //添加文件之后，把文件信息赋给scope
        //能够在这里判断添加的文件名后缀和文件大小是否满足需求。
    };
    uploader.onSuccessItem = function(fileItem, response, status, headers) {
        $scope.uploadStatus = true;   //上传成功则把状态改为true
    };
    uploader1.onSuccessItem = function(fileItem,response, status, headers){
        $scope.uploadStatus1 = true;
    }
    $scope.UploadFile = function(){
        uploader.uploadAll();
        uploader1.uploadAll();
        if(status){
            if(status1){
                alert('上传成功！');
            }else{
                alert('证书成功！私钥失败！');
            }
       }else{
            if(status1){
               alert('私钥成功！证书失败！');
            }else{
               alert('上传失败！');
            }
       }
    }
}])

总结

在上面的例子中，我定义了两个upload对象是因为要上传两个文件，每一次重新选择文件时应该覆盖之前选好的文件，所以如果定义一个对象时，有点不好操作覆盖的位置，而定义两个对象，在重新选择的时候，完全可以先清空当前对象的文件队列，再添加就好了。

其实后来我发现，也可以不定义两个upload对象，因为这个插件提供了一个removeFromQueue(index)方法，index是文件队列数组中文件的index值。因为是两次选择文件，所以把长度控制在2，然后每次选择的时候调用这个方法，根据位置传入0或者1就好了。

• 如果需要实现同一个窗口能够多选文件，使用加上<input type="file" multiple="true" />即可。

• 如果需要限制文件类型，可以使用<input type="file" accept="image/*" />'即可。

  accept取值类型列表：

  • accept="application/msexcel"

  • accept="application/msword"

  • accept="application/pdf"

  • accept="application/poscript"

  • accept="application/rtf"

  • accept="application/x-zip-compressed"

  • accept="audio/basic"

  • accept="audio/x-aiff"

  • accept="audio/x-mpeg"

  • accept="audio/x-pn/realaudio"

  • accept="audio/x-waw"

  • accept="image/*"

  • accept="image/gif"

  • accept="image/jpeg"

  • accept="image/tiff"

  • accept="image/x-ms-bmp"

  • accept="image/x-photo-cd"

  • accept="image/x-png"

  • accept="image/x-portablebitmap"

  • accept="image/x-portable-greymap"

  • accept="image/x-portable-pixmap"

  • accept="image/x-rgb"

  • accept="text/html"

  • accept="text/plain"

  • accept="video/quicktime"

  • accept="video/x-mpeg2"

  • accept="video/x-msvideo"

• 这个插件还提供了很多的配置参数，对象方法和回调函数。这可以去这里查看详细文档：点这里