angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
2017-05-17 16:18
776 查看
项目框架为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文档,不再赘述。
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 上传插件 ng-file-upload 使用时注意事项
- WebWork之--使用fileUpload interceptor实现文件上传[基本配置+注意事项]
- ng-file-upload使用注意事项
- angularjs 文件上传ng-file-upload插件使用
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- 使用ajaxfileupload插件实现异步上传并保存图片功能
- 使用插件ajaxfileupload通过ajax方式上传文件,在火狐下出错
- Flash中使用Filereference上传文件的一些注意事项
- javax.imageio.IIOException: Can't create cache file!(使用uploadfile插件上传文件)
- [转] Flash中使用Filereference上传文件的一些注意事项
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- 基于struts2的ajaxfileupload异步上传插件的使用
- 关于ajaxfileupload.js插件及其多上传的使用
- MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹
- MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
- 使用jquery插件uploadify结合commons fileupload实现多文件上传
- 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹