Angularjs上传文件组件flowjs功能


Posted in Javascript onAugust 07, 2017

现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能。

1.angularjs和flowjs

angularjs我在其他的博客里面也讲到了它的其他的一些用处,只是没有做过系统的说明,在这里也不打算一一介绍。这个在一些官网上都有说明,我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题,会在其他博客中跟大家分享。这里我只简单的一笔带过,主要是flowjs这个组件的使用。顺便一提,还得夸夸angularjs的强大。

1.1 flowjs

https://github.com/flowjs/flow.js,这个网站上是我见到过对flowjs这部分描述最清楚的API了,上面列举了flowjs作为angular下的上传组件的使用以及属性的详细讲解。我主要列举flowjs常用的一些属性以及使用时需要注意的问题

1.2flowjs属性

<form class="panel panel-default" 
   flow-init="{target: 'url',singleFile:false,testChunks:false}" 
   flow-name="vm.flow" 
   flow-files-added="!!{pem:1}[$file.getExtension()]" 
   flow-file-success="vm.action.importCAData($message)"> 
</form>

这是一个最简单的实现上传功能的代码,里面包含了一些属性和方法,其他的一些参数这里暂时用不到,感兴趣的请到上面的网站去查阅。

<span style="font-size:18px;" deep="8">{ 
 "flow-init":"初始化上传的属性值", 
 "target":"请求接口路径,对应到后台server端请求", 
 "singleFile":"是否选择单文件上传,因为flowjs默认是支持多文件上传的, 
        当然也有的需求会需要单文件上传,取值为true或false." 
        "true是只支持单文件上传,false支持多文件上传,记得一定是boolean类型的." 
 "testChunks":"flowjs上传是分片的,所以他不会只往后台发送一次请求,如果文件比较大, 
        它会分多片上传,然后等所有的都上传文成," 
        "他会去合成一个整体的文件,而这个属性设置为true之后就会去检测一下该请求在后台是否开启, 
        如果开了就会在下次即使重启或者浏览器奔溃后继续上传,我的理解应该是续传吧", 
 "flow-files-added":"可以用来限制上传文件的格式,比如excel,pem,jpeg,png等格式要求!!{pem:1,png:1}", 
 "flow-file-success":"上传成功之后的回调函数,你可以在这里面处理上传之后的其他操作。比如使用这个组件的时候会和其他表单项一起提交", 
           "这时我们需要将文件的上传路径,文件名字和其他表单项一起提交到后台,而该组件不支持参数传递,也就是使用这个组件", 
           "分为两步,第一步:点击上传,先将文件上传到服务器指定路径。同时后台返回文件路径,文件大小,文件名称等与文件相关的信息", 
           "第二步:将后台返回的文件信息和其他表单项一起封装到一个对象中,发送给后台。后台接到请求,将上传信息进行入库操作" 
}</span>

1.3实例

上面已经对flowjs进行了一个说明,在这里举个例子来使用一下该组件。关于引入js,我就不详细说了。

1.3.1组件配置

html代码(里面有些我们自定义的样式我就没有删除):

<form class="panel panel-default" 
   flow-init="{target: 'api/ham/tool/certificate/importCa',singleFile:true,testChunks:false}" 
   flow-name="vm.flow" 
   flow-file-added="!!{pem:1}[$file.getExtension()]" 
   flow-file-success="vm.action.importCAData($message)"> 
   <div class="panel-heading"> 
      <h4 class="app-heading"> 
         upload file 
      </h4> 
   </div> 
   <div class="panel-body"> 
      <div class="form-horizontal"> 
         <div class="asterisk-info">{{::'button-label.asterisk' | i18next }}</div> 
         <div class="form-group"> 
            <label class="col-md-3 control-label">*{{::'am.secondaryMenu.tools.certificate.item.uploadCAFile'|i18next}}</label> 
            <div class="col-md-6 " style="background-color:#eee;"> 
               <div class="file-name-list" style="min-height: 10em;"> 
                  <p ng-repeat="file in $flow.files" style="margin:10px 0px;"> 
                     {{$index+1}}  {{file.name}} 
                  </p> 
               </div> 
            </div> 
            <span class="btn btn-primary col-md-1" style="margin-left: 20px;" flow-btn>{{::'am.secondaryMenu.tools.certificate.item.upload'|i18next}}</span> 
         </div> 
      </div> 
   </div> 
   <div class="panel-footer"> 
      <div class="text-right"> 
         <button id="sampleOne-edit" type="button" class="btn btn-primary" 
             ng-click="vm.action.commitCAFile($flow)" ng-disabled="$flow.files.length < 1" 
             title="{{::'button-label.import' | i18next}}">{{::'button-label.import' | i18next}} 
         </button> 
      </div> 
   </div> 
</form>

从这里我们可以看出,组件是基于form表单的,当然你也可以基于其他dom节点上,基于表单的好处主要是在于表单的提交即submit按钮可以直接帮到到文件上传的$flow.upload方法上,当用户选择文件后,点击上传就会执行上传方法,在整个form表单中该$flow是全局存在的,这样我们就可以根据文件的大小或者是否选择文件来确定是否允许用户上传,为了缓解服务器压力,我们一般是不会让用户提交一些误操作的。

1.3.2方法处理

上传方法:$flow.upload

上传成功的回调函数:

vm.action.importCAData = function (responseResult) { 
        console.info('importCAData'); 
        vm.action.CAName = angular.fromJson(responseResult).data; 
        //var data = responseResult.data; 
        //data.keyPasswd = vm.cache.currentItem.keyPasswd; 
        var result = angular.fromJson(responseResult).result; 
        var errorMessage = angular.fromJson(responseResult).errorMessage; 
        if(result == "success"){ 
          vm.cache.caFlag = true; 
          vm.cache.alert._success("Upload CA certificates successfully!", vm.alertConfig); 
        }else { 
          vm.caDisabled = false; 
          vm.cache.alert._error(errorMessage, vm.alertConfig); 
        } 
      }

在这里的处理是将后台返回的文件相关的属性赋值给其他变量。当我们存在其他表单项的时候,需要将该文件的一些属性和表单项封装到同一个对象中发送给后台,让后台进行一些入库操作。
表单提交操作:

//save the form  
      vm.action.createItem = function () { 
        vm.action.data.keyPasswd = vm.cache.currentItem.keyPasswd; 
        vm.action.data.CAName = vm.action.CAName; 
        var data = {}; 
        data.caFileName = vm.action.CAName; 
        data.fileName = vm.action.data.fileName; 
        data.from = vm.action.data.from; 
        data.isExpiryStatus = vm.action.data.isExpiryStatus; 
        data.name = vm.action.data.name; 
        data.to = vm.action.data.to; 
        data.type = vm.action.data.type; 
        data.keyPasswd = vm.cache.currentItem.keyPasswd; 
        data.usingStatus = vm.action.data.usingStatus; 
        data.validityStartTime = vm.action.data.validityStartTime; 
        data.validityStopTime = vm.action.data.validityStopTime; 
        amCertificateService.createItem(data).then(function success(responseResult) { 
            if (responseResult.errorCode == 0) { 
              vm.action.reset(); 
              vm.cache.alert._success('Create radius server certificate successfully ', vm.alertConfig); 
            } else { 
              vm.cache.alert._error(responseResult.translated.errorMessageTranslated, vm.alertConfig); 
            } 
            amCertificateService.getList(); 
          }) 
          .catch(function fail(e) { 
            vm.cache.alert._error(""); 
          }) 
          .finally(function () { 
            vm.action.reset(); 
          }); 
      };

1.4后台处理

后天处理我就不多说了,自从搞上了前端,后台的代码我都挺长时间没动过了,感觉挺悲哀的。但是后天使用的是springmvc,springmvc的上传类叫MultipartFile,当然你也可以使用HttpServletRequest ,这个里面也可以转为上面的那个类。这个网上一搜一大片,我就不多说了。至此,文件上传功能就这样实现了

总结

以上所述是小编给大家介绍的Angularjs上传文件组件flowjs功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS复制到剪贴板示例代码
Oct 30 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 #Javascript
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
You might like
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JS表的模拟方法
2015/02/05 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
Python中标准模块importlib详解
2017/04/16 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python切片工具pillow用法示例
2018/03/30 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
金融专业个人的自我评价
2013/10/18 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
综合实践活动方案
2014/02/14 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS