angular-file-upload 一款好用的文件上传组件，基本应用

基本应用演示地址：http://runjs.cn/detail/o4a55204

下一篇 lizi 将会展示关于angular-file-upload的 拓展应用

第一步：引入资源文件，

    在 head 标签中引入资源

   

　　

 第二步：构建应用

     html 标签上 加指令：ng-app="app" 

     body 标签上 加指令：ng-controller="AppController" 

  

 <div class="container">
  <div class="pure-g">
    <div class="pure-u-1-1">
        <div class="upload-wp">
            <label for="uploadBtn" class="pure-button pure-button-primary upload-agent" >上传附件 <span style="font-size: .5em">（可以同时选中多个文件）span>label>
            <input  id="uploadBtn" class="upload-button"type="file" nv-file-select="" uploader="uploader" multiple  />
        div>
    div>
    <div class="pure-u-1-1" style="margin-bottom: 40px" >

        <h3>文件队列h3>
        <p>队列长度: {{ uploader.queue.length }}p>

        <table class="table">
            <thead>
            <tr>
                <th width="50%">文件名称th>
                <th ng-show="uploader.isHTML5">大小th>
                <th ng-show="uploader.isHTML5">进度th>
                <th>状态th>
                <th>操作th>
            tr>
            thead>
            <tbody>
            <tr ng-repeat="item in uploader.queue">
                <td><strong>{{ item.file.name }}strong>td>
                <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MBtd>
                <td ng-show="uploader.isHTML5">
                    <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }">div>
                    div>
                td>
                <td class="text-center">
                    <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok">i>span>
                    <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle">i>span>
                    <span ng-show="item.isError"><i class="glyphicon glyphicon-remove">i>span>
                td>
                <td nowrap>
                    <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload">span> 上传
                    button>
                    
                    <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                        <span class="glyphicon glyphicon-trash">span> 删除
                    button>
                td>
            tr>
            tbody>
        table>

        <div>
            <div>
                队列总进度:
                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }">div>
                div>
            div>
            <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                <span class="glyphicon glyphicon-upload">span> 上传全部
            button>
            
            
            
            <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                <span class="glyphicon glyphicon-trash">span> 删除全部
            button>
        div>

    div>
div>

View Code

 

 

第三步 js回调：

    

View Code

转载于:https://www.cnblogs.com/lizimeme/p/7449854.html