[Angularjs]ng-file-upload上传文件
写在前面
最近在弄文档库的H5版，就查找了下相关的上传组件，发现了ng-upload的东东，推荐给大家。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs]ng-repeat中使用ng-model遇到的问题
[Angularjs]ng-file-upload上传文件
ng-file-upload
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。
特性
支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS，
PUT(html5)/POST方法支持使用 Flash polyfill FileAPI 跨浏览器上传 (
HTML5和non-HTML5) 。允许客户端在上传之前验证或者修改文件。当文件的内容类型使用
$upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular httpPOST/PUT请求的进度事件，更多内容请看 #88(comment)Separate shim file loaded on demand for
non-HTML5code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed forprogressevent inHTML5browsers)轻量级，使用常规的
$http来上传（支持非 HTML5 浏览器），所以提供所有 Angular$http功能。
一个例子
需要的js文件，可以去这里下载：https://github.com/danialfarid/ng-file-upload
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传</title>
<meta charset="utf-8" />
<script src="JS/angular.min.js"></script>
<script src="JS/ng-file-upload.min.js"></script>
<script src="JS/ng-file-upload-shim.min.js"></script>
<script>
var app = angular.module('app', ['ngFileUpload']);
app.controller('FileController', function ($scope, Upload) {
$scope.uploadImg = '';
//提交
$scope.submit = function () {
$scope.upload($scope.file);
};
$scope.upload = function (file) {
$scope.fileInfo = file;
Upload.upload({
//服务端接收
url: 'Ashx/UploadFile.ashx',
//上传的同时带的参数
data: { 'username': $scope.username },
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
}).success(function (data, status, headers, config) {
//上传成功
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log('error status: ' + status);
});
};
});
</script>
</head>
<body>
<form ng-controller="FileController">
<img src="{{uploadImg}}"/>
当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/><div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div><button type="submit" ng-click="submit()">submit</button> {{fileInfo.name}}<br /> {{fileInfo.size}} </form></body></html>
简单测试
其中data中存的为我们上传文件的同时，需要的参数。
完整的例子，上传成功并在页面上进行预览。
public class UploadFile : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var paras = context.Request.Params["data"];
JObject jobj = JObject.Parse(paras);
string strUserName = jobj["username"].ToString();
HttpFileCollection files = context.Request.Files;
if (files.Count > )
{
var file = files[];
string fileExt = Path.GetExtension(file.FileName);
string fileNewName = Guid.NewGuid() + fileExt;
string strRelativeDir = "/Upload/" + strUserName;
string strDir = context.Request.MapPath(strRelativeDir);
if (!Directory.Exists(strDir))
{
Directory.CreateDirectory(strDir);
}
string strSavePath = Path.Combine(strDir, fileNewName);
file.SaveAs(strSavePath);
context.Response.Write(Path.Combine(strRelativeDir, fileNewName));
}
} public bool IsReusable
{
get
{
return false;
}
}
}
总结
使用ng-file-upload可以很好的与angularjs结合。在使用的时候，查找了一下angularjs相关的文件上传的例子，如果浏览器支持html5，那也可以很方便的制作进度条，另外该组件也支持多文件上传。推荐给大家。
你可以去这里进行下载：https://github.com/danialfarid/ng-file-upload
[Angularjs]ng-file-upload上传文件的更多相关文章
- Struts Upload上传文件
1.Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.te ...
- php 下 html5 XHR2 + FormData + File API 上传文件
FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...
- element-ui upload上传文件并携带参数 使用formData对象
需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...
- thinkphp Upload上传文件在客户端生成的临时文件$_FILES['file']['tmp_name']
1.关于thinkphp 的Upload的$_FILES['file']['tmp_name'] 在使用thinkphp上传图片的时候,在上传的$_FILES数组中,有一个$_FILES['file' ...
- angularJS 在edge浏览器上传文件，无法主动触发ng-click
今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执 ...
- input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- SSH Secure File Transfer上传文件错误：encountered 1 errors during the transfer解决办法
在使用SSH 工具向Linux服务器上传文件时,弹出 encountered 1 errors during the transfer 错误. 解决方案: 1.准备上传的那个文件所在目录路径存在(), ...
- ie8及其以下版本兼容性问题之input file隐藏上传文件
文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距.因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它.但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按 ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
随机推荐
- Java系列：关于Java中的桥接方法
这两天在看<Java核心技术 卷1>的泛型相关章节,其中说到了在泛型子类中override父类的泛型方法时,编译器会自动生成一个桥接方法,这块有点看不明白. 书上的例子代码如下: publ ...
- UIView的layoutSubviews和drawRect方法何时调用 ———转
转自:http://jianyu996.blog.163.com/blog/static/112114555201305113018814/ 首先两个方法都是异步执行.layoutSubviews方便 ...
- C#异步编程一
前几天把Code First系列总结完,想着下步总结什么,原本想着XML,不过XML的内容比较多,还有3天班就中秋节了,想在中秋节前在完成一个系列,所以决定把异步这块总结下.说起异步可能会认为就是多线 ...
- Sublime Text 2 使用笔记（大全呀，菜鸟必看）
下载和安装 Sublime Text2是一款开源的软件,不需要注册即可使用(虽然没有注册会有弹窗,但是基本不影响使用). 下载地址:http://www.sublimetext.com ,请自行根据系 ...
- python3 入门 (四) 类与继承
Python 类 Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法中可以调用基类中的同名方法. 对象可以包含任意数量和类型的数据. p ...
- C/C++指针内存分配小细节
char *pc = NULL; pc = new char[0]; pc[0] = '1'; 相信初学者看见上面这段代码,都会觉得奇怪,new char[n]中的n指定给指针变量分配多少内存空间,而 ...
- 趋势or过渡，量子点屏幕真的优于OLED？
[导读]谁都知道买电视就是要买看起来很爽的产品,但怎么界定这个“爽”字?大部分人所知的是屏幕要够大,再近一步就是分辨率要够高——在这个4K分辨率逐步进入寻常家庭的时代,这两者已经不是选购屏幕类产品的大 ...
- LINUX下软件包的安装与使用
1.安装RPM包 rpm -ivh 包全名 2.查询某个包是否安装 rpm -q 包名 3.查询已安装的包的信息(主要看版本) rpm -qi 包名 4.查询已安装包的安装位置 rpm -ql 包名 ...
- 用wcf实现带有“秒传”功能的网盘
写在前面 前面记录过这样一个关于“秒传”的实现思路,在这篇就弄了一个简单的demo实现了一下,当中有很多业务仍没考虑,只是将“秒传”的实现思路,用代码实现了一下. 关于秒传,可以参考这篇文章:何为“秒 ...
- Web Service 小练习
对于网站与网站之间数据互动,这是我的说法,不是专家说的,不要相信.应该有专业的说法. 从他人的网站通过一个接口获取数据,这一直是我感到神奇的事,怎么实现的,一直萦绕于心,想要弄过究竟,怎么是实现的啊! ...