前端之家收集整理的这篇文章主要介绍了
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属性
这是一个最简单的实现上传功能的代码,里面包含了一些属性和方法,其他的一些参数这里暂时用不到,感兴趣的请到上面的网站去查阅。
上传的
属性值","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":"
上传成功之后的回调
函数,你可以在这里面处理
上传之后的其他操作。比如使用这个组件的时候会和其他表单项一起提交","这时我们需要将
文件的
上传路径,
文件名字和其他表单项一起提交到
后台,而该组件
不支持参数传递,也就是使用这个组件","分为两步,第一步:点击
上传,先将
文件上传到服务器指定路径。同时
后台返回
文件路径,
文件大小,
文件名称等与
文件相关的信息","第二步:将
后台返回的
文件信息和其他表单项一起封装到一个对象中,发送给
后台。
后台接到请求,将
上传信息进行入库操作"
}
1.3实例
上面已经对flowjs进行了一个说明,在这里举个例子来使用一下该组件。关于引入js,我就不详细说了。
1.3.1组件配置
HTML代码(里面有些我们自定义的样式我就没有删除):
{{::'am.secondaryMenu.tools.certificate.item.upload'|i18next}}