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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
html中table数据排序的js代码
Aug 09 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
webpack的移动端适配方案小结
Jul 25 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之require/include顺序 推荐
2011/01/02 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python定向爬取淘宝商品价格
2018/02/27 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python Map 函数的使用
2020/08/28 Python
python实现感知机模型的示例
2020/09/30 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
上课睡觉检讨书
2014/01/28 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
清明节演讲稿
2014/05/27 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang