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 相关文章推荐
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
bootstrap css样式之表单
Jan 19 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
react antd实现动态增减表单
Jun 03 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
php与js的区别是什么
2013/08/05 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python操作mysql数据库
2017/03/05 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python处理“
2019/06/10 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
如何理解python对象
2020/06/21 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
探亲邀请信范文
2014/01/30 职场文书
优秀医生事迹材料
2014/02/12 职场文书
社区工作感言
2014/02/21 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript