基于Angularjs实现图片上传和下载
根据ng-file-uoload实现文件上传和下载实现
网上down下来ng-file-uoload.js,在项目中记得引入服务哦。
示例代码:
FileUploaderCtrl.$inject = ["$scope","$FileUploader"];
function FileUploaderCtrl($scope,$FileUploader) {
var uploader = $scope.uploader = new $FileUploader({
url: '/file/upload.do'
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function (fileItem, response, status, headers) { //上传成功
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function (fileItem, response, status, headers) { //上传成功
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function () {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
};
/*
* uploader.onSuccessItem
* uploader.onCompleteItem
* 根据这两个函数即可获取到相应的返回状态
*
*/
Html中也要有相应的更改:
<input type="file" name="****" value="****" nv-file-select="" uploader="uploader"/>
ps:有需要js文件的可以联系我
实际开发代码 :
var uploader2 = $scope.uploader2 = new FileUploader({
url:$scope.$serverPath+'BatchFileUpload.do'
});
uploader2.onAfterAddingFile = function(fileItem) {
$scope.fileName = fileItem.file.name;
if($scope.uploader2.queue&&$scope.uploader2.queue.length>1){
for(var i=0;i<$scope.uploader2.queue.length-1;i++){
$scope.uploader2.queue[i].remove();
}
}
};
//文件上传
$scope.submitPre1 = function () {
if (!parseFloat($scope.totalAmount)>0) {
$scope.alert("转账金额不能为0!");
return false;
}
$scope.uploader2.onBeforeUploadItem= function(item){
item.alias='UploadFile';
item.formData = [{"FileName":FileName}
]
}
};
uploader2.onSuccessItem = function(fileItem, response, status, headers) {
if(response.jsonError) {
$scope.confirm(response.jsonError[0]["_exceptionMessage"],function(){$state.reload()},function(){$state.reload()});
} else {
$scope.queryList();
}
};
var length = $scope.uploader2.queue.length;
var a = $scope.uploader2.queue[length-1];
if(a){
a.upload();
}else{
$scope.alert("请选择文件")
}
};
基于Angularjs实现图片上传和下载的更多相关文章
- [python][flask] Flask 图片上传与下载例子(支持漂亮的拖拽上传)
目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...
- 基于jsp的文件上传和下载
参考: 一.JavaWeb学习总结(五十)--文件上传和下载 此文极好,不过有几点要注意: 1.直接按照作者的代码极有可能listfile.jsp文件中 <%@taglib prefix=&qu ...
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
public function test2(){ $Weixin = new \Weixin\Controller\BaseController(); $this->assign('signPa ...
- 基于Jcrop的图片上传裁剪加预览
最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- 基于hap的文件上传和下载
序言 现在,绝大部分的应用程序在很多的情况下都需要使用到文件上传与下载的功能,在本文中结合hap利用spirng mvc实现文件的上传和下载,包括上传下载图片.上传下载文档.前端所使用的技术不限,本文 ...
- 基于WebImage的图片上传工具类
支持缩略图和水印. using System; using System.IO; using System.Linq; using System.Web; using System.Web.Helpe ...
- 关于图片上传与下载(Java)
图片的上传 package com.upload; import java.io.IOException;import java.io.PrintWriter; import javax.servle ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
随机推荐
- Python函数之lambda,内置函数,yield生成器等
lambda 1,用于处理简单逻辑 2,自动返回数据(return) 单参数 >>> func2 = lambda a: a+1>>> result = func2 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- NancyFx 2.0的开源框架的使用-Caching
新建一个空的Web项目,命名CachingDemo 然后添加三个Nuget安装包 Nancy Nancy.Hosting.Aspnet Nancy.ViewsEngines.Razor 然后往项目里面 ...
- 基于TypeScript的FineUIMvc组件式开发(开头篇)
了解FineUIMvc的都知道,FineUIMvc中采用了大量的IFrame框架,对于IFrame的优缺点网上也有很多的讨论,这里我要说它的一个优点“有助于隔离代码逻辑”,这也是FineUIMvc官网 ...
- 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题
过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...
- python 列表、元组、字符串、字典、集合、return等梳理
有必要对这些数据类型及操作做下梳理: 1.列表:增删改查 a.查找: >>> names=["zhang","wang","li&q ...
- JDBC进阶
PreparedStatement的使用: conn = DriverManager.getConnection("jdbc:mysql://localhost/mydata?" ...
- java虚拟机学习-慢慢琢磨JVM(2-1)ClassLoader的工作机制
ClassLoader的工作机制 java应用环境中不同的class分别由不同的ClassLoader负责加载. 一个jvm中默认的classloader有Bootstrap ClassLoader. ...
- linux tcp中time_wait
http://www.cnblogs.com/my_life/articles/3460873.html http://blog.csdn.net/sunnydogzhou/article/detai ...
- Zepto源码分析-架构
构造函数 Zepto.js 是专门为智能手机浏览器推出的javascript库, 拥有与和jQuery相似的语法. 它的优点是精简,压缩后5-10K. 不支持IE MIT开源协议 结构 http: ...