angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
来源:互联网 发布:mac不休眠 编辑:程序博客网 时间:2024/04/20 03:40
项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下。在这里简单回顾一下自己使用的插件的部分功能和需要注意的事项。
1.引入angular-file-upload.js,放在angular js 之后。
2.将文件注入angular js 的模块中,如 var app = angular.module (" myapp ", [ ' angularFileUpload ' ] );
3.下面就是具体使用了,API文档中 介绍的很详细,支持多种上传样式,如单选,多选,单击选择,拖拽选择等。可以具体研究。我只用到了单选同时也是单击选择。
<div ng-app="myapp">
<div ng-controller="appCtrl">
<input type="file" nv-file-select uploader = "uploader">
<ul>
<li ng-repeat="item in uploader.queue">
<span>{{item.file.name}}</span>
</li>
</ul>
</div>
</div>
其中input file 为上传按钮,它本身的样式比较简单,我这里只需要一个上传按钮,只能用a标签包住input,并将input 设为透明,来实现我想要的按钮样式。
li标签repeat 出来的就是上传后的文件。queue就是上传后的队列。当然我这里每个文件后还提供删除按钮,这样用他的队列就不太好改,我也尝试过。最终决定自己做个repeat 把上传后的文件名显示在页面上,同时提供删除方法。
4.js中有许多属性,方法和回调函数。具体可以研究API.
controller中同样需要注入。例
myapp.contrller("appCtrl",function(FileUploader){
var uploader = $scope.uploader = new FileUploader({
url:"" //上传文件的url
formData:[Array] //跟随上传文件同时上传的参数。[{}]参数
autoUpload:true //自动上传
})
})
alias 里面的名称需要与后台代码中的一致,默认为file.
回调函数有成功后,添加后失败后执行的操作,不再一一赘述。
说了半天,重点来了,插件的兼容性如何,本来加上列出的shim.js等等,以为会兼容,但在IE9上始终上传失败,报错。
typeErr.最终没办法只好再换一个插件即ng-file-upload.先说一下这个插件的兼容性。
它是可以兼容到IE9,对于IE9及一下,可以引入shim.js和一段
<!--[if lte IE 9]>
<script>
FileAPI = {
jsUrl: 'FileAPI.min.js',
flashUrl: 'FileAPI.flash.swf',
}
</script>
<script src="ng-file-upload-shim.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
注意这段需要放在shim.js 前面,同时 包含FileAPI.min.js和FileAPI.flash.swf这两个文件。
具体使用和angular-file-upload,相似,就是所用文件和格式不同。详细可以研究API文档,不再赘述。
- angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
- Js上传图片 jquery:ajaxfileupload和angular:angular-file-upload
- Angular-file-upload文件上传插件的使用
- angular file upload 文件上传
- angular 上传文件的插件angular-file-upload
- ng-file-upload使用注意事项
- angular-file-upload
- Angular angular-file-upload 入坑记
- angular file upload 队列上传机制
- Angular-File-Upload-Qiniu上传图片至七牛
- angular-file-upload angularJS 文件上传
- angular-file-upload的使用总结
- angularjs 文件上传ng-file-upload插件使用
- angular-file-upload 中文API
- angular-file-upload 中文API
- [Angularjs]ng-file-upload上传文件
- AngularJS 文件上传控件 ng-file-upload
- AngularJS 文件上传控件 ng-file-upload
- MobileUI组件
- Proguard说明,android代码混淆
- textarea提交的时候怎么去除首尾的空格
- spring 同时配置hibernate and jdbc 事务
- DelegatingFilterProxy作用浅析
- angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
- 短URL系统如何设计方案
- 关于Recyclerview 实现多选,单选,全选,反选,批量删除的功能的实现
- 行为型模式之模板方法模式(TemplateMethod)
- 颜色科学的发展历史
- 文本框时间为日历格式
- 音乐播放器
- hadoop 初接触
- Android Studio编译常见错误