Angularjs上传文件组件flowjs功能

现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用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功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

  • angularjs客户端实现压缩图片文件并上传实例

    主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString

  • AngularJS向后端ASP.NET API控制器上传文件

    本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpResponseMessage> Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Requ

  • AngularJS 文件上传控件 ng-file-upload详解

    网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

  • 基于AngularJS的拖拽文件上传的实例代码

    随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

  • SpringMvc+Angularjs 实现多文件批量上传

    SpringMvc代码 jar包 commons-fileupload commons-io spring-mvc.xml配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UT

  • Angularjs上传文件组件flowjs功能

    现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能. 1.angularjs和flowjs angularjs我在其他的博客里面也讲到了它的其他的一些用处,只是没有做过系统的说明,在这里也不打算一一介绍.这个在一些官网上都有说明,我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题,会在其他博客中跟大家分享.这里我只简单的一笔带过,主要是flowjs

  • php+ajax实现异步上传文件或图片功能

    本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交&q

  • SimpleCommand实现上传文件或视频功能(四)

    上传文件的核心功能主要是在UploadCommand.java中实现 使用步骤: 1 创建UploadCommand的构建类Builder UploadCommand.Builder builder = new UploadCommand.Builder(); 2 通过构建类设置UploadCommand的各种属性 builder.domain("上传地址的域名") .path("上传接口") .contentType("请求头文件的Content-typ

  • axios+Vue实现上传文件显示进度功能

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> <h4>上传文件:</h4> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+请选择文件上传

  • Vue开发之封装上传文件组件与用法示例

    本文实例讲述了Vue开发之封装上传文件组件与用法.分享给大家供大家参考,具体如下: 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性,所以数据的处理会不同 pictureupload.vue: <template> <div class="pictureupload"> <el-upload :action="baseUrl + '/api/public/image'" list-type=&q

  • AngularJS上传文件的示例代码

    使用AngularJS上传文件 前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 html <div> <input id="fileUpload" type="file" /> <button ng-click="uploadFile()">上传</button> </div> js $scope.upload = function(){ var f

  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • Ant Design_Form表单上传文件组件实现详解

    目录 背景 实现 问题1: 问题2: tip1:注意一下新增和修改时校验方法 tip2: 注意一下beforeUpload的返回值 背景 需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件:一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL: 刚开始,对文件没有必填的校验,是比较简单的:但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题: 实现 首先,先对Upload组件加上必传的校验 rules=

  • Vue封装一个简单轻量的上传文件组件的示例

    一.之前遇到的一些问题 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false"),可实际上还是能多选,上传的时候依然发送了多个文件:又比如只要加上了(:file-list="fileList")属性,希望能手动控制上传列表的时候,上传事件this.refs.[upload(组件ref)].submit()就不起作用了,传不了.总之,懒得再看它怎么实现了,我

随机推荐