angular-file-upload首页、文档和下载 - AngularJS 文件上传工具 - 开源中国社区
当前访客身份：游客 [
当前位置：
angular-file-upload
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。
支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， PUT(html5)/POST 方法
支持使用 Flash polyfill & 跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。
当文件的内容类型使用 $upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http POST/PUT 请求的进度事件，更多内容请看
Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)
轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http 功能
&!--&shim&is&needed&to&support&upload&progress/abort&for&HTML5&and&non-HTML5&FormData&browsers.--&&!--&angular-file-upload-html5-shim.js&could&be&used&instead&of&angular-file-upload-shim&if&your&app&targets&HTML5&browsers&only&(not&IE8-9)&--&&!--&Note:&shim.js&MUST&BE&PLACED&BEFORE&angular.js&and&angular-file-upload.js&AFTER&angular.js--&&script&src="angular-file-upload-shim.min.js"&&/script&&
&script&src="angular.min.js"&&/script&
&script&src="angular-file-upload.min.js"&&/script&&
&div&ng-controller="MyCtrl"&
&&&input&type="text"&ng-model="myModelObj"&
&&&input&type="file"&ng-file-select="onFileSelect($files)"&
&&&input&type="file"&ng-file-select="onFileSelect($files)"&multiple&accept="image/*"&
&&&div&class="button"&ng-file-select="onFileSelect($files)"&data-multiple="true"&&/div&
&&&div&ng-file-drop="onFileSelect($files)"&ng-file-drag-over-class="optional-css-class-name-or-function"
&&&&&&&&ng-show="dropSupported"&drop&files&here&/div&
&&&div&ng-file-drop-available="dropSupported=true"&
&&&&&&&&ng-show="!dropSupported"&HTML5&Drop&File&is&not&supported!&/div&
&&&button&ng-click="upload.abort()"&Cancel&Upload&/button&
//inject&angular&file&upload&directives&and&service.angular.module('myApp',&['angularFileUpload']);var&MyCtrl&=&[&'$scope',&'$upload',&function($scope,&$upload)&{
&&$scope.onFileSelect&=&function($files)&{&&&&//$files:&an&array&of&files&selected,&each&file&has&name,&size,&and&type.
&&&&for&(var&i&=&0;&i&&&$files.&i++)&{&&&&&&var&file&=&$files[i];
&&&&&&$scope.upload&=&$upload.upload({
&&&&&&&&url:&'server/upload/url',&//upload.php&script,&node.js&route,&or&servlet&url
&&&&&&&&//method:&'POST'&or&'PUT',
&&&&&&&&//headers:&{'header-key':&'header-value'},
&&&&&&&&//withCredentials:&true,
&&&&&&&&data:&{myObj:&$scope.myModelObj},
&&&&&&&&file:&file,&//&or&list&of&files&($files)&for&html5&only
&&&&&&&&//fileName:&'doc.jpg'&or&['1.jpg',&'2.jpg',&...]&//&to&modify&the&name&of&the&file(s)
&&&&&&&&//&customize&file&formData&name&('Content-Disposition'),&server&side&file&variable&name.&
&&&&&&&&//fileFormDataName:&myFile,&//or&a&list&of&names&for&multiple&files&(html5).&Default&is&'file'&
&&&&&&&&//&customize&how&data&is&added&to&formData.&See&#40#issuecomment-&for&sample&code
&&&&&&&&//formDataAppender:&function(formData,&key,&val){}
&&&&&&}).progress(function(evt)&{&&&&&&&&console.log('percent:&'&+&parseInt(100.0&*&evt.loaded&/&evt.total));
&&&&&&}).success(function(data,&status,&headers,&config)&{&&&&&&&&//&file&is&uploaded&successfully
&&&&&&&&console.log(data);
&&&&&&});&&&&&&//.error(...)
&&&&&&//.then(success,&error,&progress);&
&&&&&&//&access&or&attach&event&listeners&to&the&underlying&XMLHttpRequest.
&&&&&&//.xhr(function(xhr){xhr.upload.addEventListener(...)})
&&&&}&&&&/*&alternative&way&of&uploading,&send&the&file&binary&with&the&file's&content-type.&&&&&&&Could&be&used&to&upload&files&to&CouchDB,&imgur,&etc...&html5&FileReader&is&needed.&&&&&&&&It&could&also&be&used&to&monitor&the&progress&of&a&normal&http&post/put&request&with&large&data*/
&&&&//&$scope.upload&=&$upload.http({...})&&see&88#issuecomment-&for&sample&code.
angular-file-upload最新更新资讯，共1条&&()
授权协议：
开发语言：
操作系统：&跨平台&
收录时间：
Say素描 发表于9个月前
，最后回答(9个月前)：
chrlis 发表于2年前
，最后回答(1年前)：
使用 angular-file-upload 中的任何问题
：这个angular-file-upload-shim.min.js没法下载啊！
：用了华硕。。。
共有 73 个类似软件
Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在 AngularJS 应用中集成 High...
ngInfiniteScroll 是一个 AngularJS 的扩展指令，实现了网页的无限滚动的功能，也就...
AngularJS Toaster 是 AngularJS 的扩展，实现了无堵塞消息通知。该项目对 Toastr...
Satellizer 是一个简单易用的、端到端的基于 token 的 AngularJS 认证模块。内建对...
angular-oauth2 是 AngularJS 的 OAuth2 认证模块，使用 ES6 编写。 使用方法： 1....
Angular Beans 是一个使用 Java EE 7 和 CDI 规范轻松实现在 Java EE 应用中集成 ...
Angucomplete 是一个的指令扩展，实现了输入框自动完成的功能，外观简单直接，支持...
Angular-xeditable 是 AngularJS 指令绑定，允许创建（可编辑元素） editable ele...
ngClip 是一个 AngularJS 的扩展指令，封装了 ZeroClipboard 实现了拷贝到剪贴板的...
angular-next-starter-kit 是使用 Angular 1.x 开发的应用准备迁移到 Angular 2.0 ...
共有 177 人关注 angular-file-uploadangularjs angular-file-upload Unknown provider: $uploadProvider error - Tech Forum Network
& angularjs angular-file-upload Unknown provider: $uploadProvider error
This is not a duplicate of
I have included all the required files in view:
&script src="~/Scripts/angular-file-upload-master/examples/console-sham.min.js"&&/script&
&script src="~/Content/js/angular.js"&&/script&
&script src="~/Scripts/angular-file-upload-master/angular-file-upload.js"&&/script&
My module and controller:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
But still I get this error.
Error: [$injector:unpr] Unknown provider: $uploadProvider
Please help me out.
More Related Questions I'm using angular-file-upload available here: /danialfarid/angular-file-upload.
As you can see in the example furnished on the same page, file data is posted to backend [&] I try to upload a file using Angularjs but ends up with error
&!DOCTYPE html&
&html ng-app = "myApp"&
&script [&] I am trying to write a file-reader directive using AngularJS that will take in images and then push their URL into an array so I can then iterate through that array and draw the images to [&] I am trying to use nervgh/angular-file-upload to show image preview on canvas when click on upload file button.
I have an angular app, where the controller is defined in the body tag.
I [&] I am just testing out this Angular module "Nervgh Angular File Upload" for file upload and so far I was able to get it to work as per the example given in the instruction which is great. [&] I have made a directive for file upload... I am trying to clear the file upload attachment using external button.
my plunkr work
I am able to clear the scope model with the button, but [&] I'm using this
Angular File Upload library for my uploading process.
It uploads perfectly okay using the same setup that is listed on that repo.
However, I have to have the files upload [&] I use /nervgh/angular-file-upload for file uploads.
I have a form which, in addition to uploading a file, sends some other fields. For clarity, I send only one field in [&] I have a Java Spring MVC Web application as server. And AngularJS based application as client.
In AngularJS, I have to upload a file and send to server.
Here is my html
&form [&] The document insert REST api (POST /v1/documents) requires multipart/mixed for content-type. All the examples online show how to use multipart/form-data. Based on my research I learned [&]1690人阅读
AngularJs（3）
原文技术交流：
在做网站的过程中难免会遇到上传图片或者上传文件的功能，使用AngularJ实现的话可以用angularJs的ng-file-upload这个库。
支持上传文件(目前为止我用过的是Excel上传，与上传图片的方法一样)支持单张图片上传支持多张图片上传支持拖拽图片上传
1.Install安装引用
手册：可以从最新的js库Bower安装：
bower install ng-file-upload-shim --save(for non html5 suppport)
bower install ng-file-upload --saveNuGet：PM& Install-Package angular-file-uploadNPM：npm install ng-file-upload
&script src=&angular(.min).js&&&/script&
&script src=&ng-file-upload-shim(.min).js&&&/script& &!-- for no html5 browsers support --&
&script src=&ng-file-upload(.min).js&&&/script&
2.Usage用法
(1)Single image upload
image-upload.html:
//显示选择的图片
&img ngf-src=&data.file || data.defaultImage& class=&img-responsive& style=&width:200 height: 200 max-width:500&/&
&div class=&button& ngf-select=&& ngf-pattern=&'image/*'& ngf-multiple=&false& ng-model=&data.file&&
&button ng-click=&upload()&&upload&/button&
image-upload-ctrl.js:
&$scope.data = {
file: null
$scope.upload = function () {
if (!$scope.data.file) {
var url = $scope.params.
//params是model传的参数，图片上传接口的url
var data = angular.copy($scope.params.data || {}); // 接口需要的额外参数，比如指定所上传的图片属于哪个用户: { UserId: 78 }
data.file = $scope.data.
Upload.upload({
data: data
}).success(function (data) {
$scope.hide(data);
}).error(function () {
logger.log('error');
(2)Multiple images upload
&div class=&button& ngf-select ngf-pattern=&'image/*'& ng-model=&files& ngf-multiple=&true&&选择多张图片&/div&
//ngf-multiple控制是否可以上传多张图片
// for multiple files:
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i & files. i++) {
Upload.upload({..., data: {file: files[i]}, ...})...;
// or send them all together for HTML5 browsers:
Upload.upload({..., data: {file: files}, ...})...;
(3)Drop Single&&image
image-upload.html:
&button class=&btn btn-default& ngf-select=&& ngf-pattern=&'image/*'& ng-model=&data.file&
ngf-multiple=&false&&
&span&(支持拖拽单张图片上传)&/span&
&div ngf-drop ngf-pattern=&'image/*'& ng-model=&data.file& class=&cropArea&&
&img-crop image=&data.file|| data.defaultImage& resule-image=&data.file&&&/img-crop&
&div class=&col col-sm-4 text-left&&
&img ngf-src=&data.file|| data.defaultImage&
style=&width:200 height: 200 max-width:500&/&
&button class=&btn btn-primary& ng-click=&upload()&&开始上传&/button&
style.css:
.cropArea {
background: #E4E4E4;
min-height: 230
margin: 15
margin-right: 0;
(4)Drop and Select &Multiple images upload
image-upload.html:
&button class=&btn btn-default& ngf-select=&selectImage($files)& ngf-pattern=&'image/*'&
ngf-multiple=&true&&
&span&(支持多张图片拖拽上传)&/span&
&div class=&row cropArea& style=&padding: 0 15px 15px 0& ngf-drop ngf-pattern=&'image/*'& ng-model=&files&
ngf-multiple=&true&&
&img-crop image=&files || data.defaultImage& resule-image=&files&&&/img-crop&
&div ngf-no-file-drop&该浏览器不支持拖拽上传。&/div&
&div class=&col col-xs-4 text-left& style=&margin-top: 15& ng-repeat=&image in mulImages&&
&div ng-repeat=&oneImage in image&&
&img ngf-src=&oneImage || data.defaultImage& class=&img-responsive&&
style=&width:200 height: 200 max-width:500&/&
//&img-crop&&/img-crop&定义了图片可以拖拽的位置
//&img/&排列显示上传的多张图片
style.css:
.cropArea {
background: #E4E4E4;
min-height: 230
margin: 15
margin-right: 0;
image-upload-ctrl.js:
$scope.data = {
file: null,
defaultImage: commonSvc.defaultImage
$scope.mulImages = [];
$scope.$watch('files', function () {
$scope.selectImage($scope.files);
//根据选择的图片来判断 是否为一下子选择了多张
//一下子选择多张的数据格式为一个数组中有多个对象，而一次只选择一张的数据格式为一个数组中有一个对象
$scope.selectImage = function (files) {
if (!files || !files.length) {
if (files.length & 1) {
angular.forEach(files, function (item) {
var image = [];
image.push(item);
$scope.mulImages.push(image);
$scope.mulImages.push(files);
$scope.upload = function () {
if (!$scope.mulImages.length) {
var url = $scope.params.
var data = angular.copy($scope.params.data || {});
data.file = $scope.mulI
Upload.upload({
data: data
}).success(function (data) {
$scope.hide(data);
$rootScope.alert('success');
}).error(function () {
$rootScope.alert(‘error’);
以上内容是我做项目中需要的一些功能，也许不是该库全面的功能，若有其他需求可以查看GitHub官方文档：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4054次
排名：千里之外
原创：14篇
(1)(4)(3)(5)(9)angular-file-upload的类似软件 - AngularJS 文件上传工具 - 开源中国社区
当前访客身份：游客 [
当前位置：
angular-file-upload
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。
支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， PUT(html5)/POST 方法
支持使用 Flash polyfill & 跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。
当文件的内容类型使用 $upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http POST/PUT 请求的进度事件，更多内容请看
Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)
轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http 功能
&!--&shim&is&needed&to&support&upload&progress/abort&for&HTML5&and&non-HTML5&FormData&browsers.--&&!--&angular-file-upload-html5-shim.js&could&be&used&instead&of&angular-file-upload-shim&if&your&app&targets&HTML5&browsers&only&(not&IE8-9)&--&&!--&Note:&shim.js&MUST&BE&PLACED&BEFORE&angular.js&and&angular-file-upload.js&AFTER&angular.js--&&script&src="angular-file-upload-shim.min.js"&&/script&&
&script&src="angular.min.js"&&/script&
&script&src="angular-file-upload.min.js"&&/script&&
&div&ng-controller="MyCtrl"&
&&&input&type="text"&ng-model="myModelObj"&
&&&input&type="file"&ng-file-select="onFileSelect($files)"&
&&&input&type="file"&ng-file-select="onFileSelect($files)"&multiple&accept="image/*"&
&&&div&class="button"&ng-file-select="onFileSelect($files)"&data-multiple="true"&&/div&
&&&div&ng-file-drop="onFileSelect($files)"&ng-file-drag-over-class="optional-css-class-name-or-function"
&&&&&&&&ng-show="dropSupported"&drop&files&here&/div&
&&&div&ng-file-drop-available="dropSupported=true"&
&&&&&&&&ng-show="!dropSupported"&HTML5&Drop&File&is&not&supported!&/div&
&&&button&ng-click="upload.abort()"&Cancel&Upload&/button&
//inject&angular&file&upload&directives&and&service.angular.module('myApp',&['angularFileUpload']);var&MyCtrl&=&[&'$scope',&'$upload',&function($scope,&$upload)&{
&&$scope.onFileSelect&=&function($files)&{&&&&//$files:&an&array&of&files&selected,&each&file&has&name,&size,&and&type.
&&&&for&(var&i&=&0;&i&&&$files.&i++)&{&&&&&&var&file&=&$files[i];
&&&&&&$scope.upload&=&$upload.upload({
&&&&&&&&url:&'server/upload/url',&//upload.php&script,&node.js&route,&or&servlet&url
&&&&&&&&//method:&'POST'&or&'PUT',
&&&&&&&&//headers:&{'header-key':&'header-value'},
&&&&&&&&//withCredentials:&true,
&&&&&&&&data:&{myObj:&$scope.myModelObj},
&&&&&&&&file:&file,&//&or&list&of&files&($files)&for&html5&only
&&&&&&&&//fileName:&'doc.jpg'&or&['1.jpg',&'2.jpg',&...]&//&to&modify&the&name&of&the&file(s)
&&&&&&&&//&customize&file&formData&name&('Content-Disposition'),&server&side&file&variable&name.&
&&&&&&&&//fileFormDataName:&myFile,&//or&a&list&of&names&for&multiple&files&(html5).&Default&is&'file'&
&&&&&&&&//&customize&how&data&is&added&to&formData.&See&#40#issuecomment-&for&sample&code
&&&&&&&&//formDataAppender:&function(formData,&key,&val){}
&&&&&&}).progress(function(evt)&{&&&&&&&&console.log('percent:&'&+&parseInt(100.0&*&evt.loaded&/&evt.total));
&&&&&&}).success(function(data,&status,&headers,&config)&{&&&&&&&&//&file&is&uploaded&successfully
&&&&&&&&console.log(data);
&&&&&&});&&&&&&//.error(...)
&&&&&&//.then(success,&error,&progress);&
&&&&&&//&access&or&attach&event&listeners&to&the&underlying&XMLHttpRequest.
&&&&&&//.xhr(function(xhr){xhr.upload.addEventListener(...)})
&&&&}&&&&/*&alternative&way&of&uploading,&send&the&file&binary&with&the&file's&content-type.&&&&&&&Could&be&used&to&upload&files&to&CouchDB,&imgur,&etc...&html5&FileReader&is&needed.&&&&&&&&It&could&also&be&used&to&monitor&the&progress&of&a&normal&http&post/put&request&with&large&data*/
&&&&//&$scope.upload&=&$upload.http({...})&&see&88#issuecomment-&for&sample&code.
angular-file-upload最新更新资讯，共1条&&()
授权协议：
开发语言：
操作系统：&跨平台&
收录时间：
angular-file-upload 的类似软件，共73个
Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在 AngularJS 应用中集成 Highcharts 图表库的功能。 演示地址：http://jsfiddle.net/pablojim/46rhz/ 使用方法： var myapp = angular.module(&myapp&, [...
最新新闻：
ngInfiniteScroll 是一个 AngularJS 的扩展指令，实现了网页的无限滚动的功能，也就是相当于页面滚动到最底部的时候自动加载更多内容。 使用方法： 1. 引入 JS 库 &script type=&text/javascript& src=&path/t...
最新新闻：
AngularJS Toaster 是 AngularJS 的扩展，实现了无堵塞消息通知。该项目对 Toastr 进行改造，原来的 Toastr 只支持 jQuery，而 AngularJS Toaster 只需要依赖 AngularJS 即可。 示例代码： // Display an inf...
最新新闻：
Satellizer 是一个简单易用的、端到端的基于 token 的 AngularJS 认证模块。内建对 Google、Facebook、LinkedIn 和 Twitter 认证支持。提供 Email 和密码登录方法，你也可以自行扩展认证的方法，支持 OAuth 1.0 ...
最新新闻：
angular-oauth2 是 AngularJS 的 OAuth2 认证模块，使用 ES6 编写。 使用方法： 1. 引入 js 库： &script src=&bower_components/angular/angular.min.js&&&/script&
&script src=&bower_components/angular-c...
最新新闻：
Angular Beans 是一个使用 Java EE 7 和 CDI 规范轻松实现在 Java EE 应用中集成 AngularJS 框架的功能。 特性： 可以在 CDI Bean 注入和回调 AngularJS 服务 将 $scope 绑定到 Bean 模型 处理 HTTP 方法调用 最好...
最新新闻：
Angucomplete 是一个的指令扩展，实现了输入框自动完成的功能，外观简单直接，支持本地和远程 JSON 数据，无需依赖其他第三方库，可通过简单的 CSS 进行定制。 基本使用示例： &angucomplete id=&members&
最新新闻：
Angular-xeditable 是 AngularJS 指令绑定，允许创建（可编辑元素） editable elements，这种技术被称之为 click-to-edit 或 edit-in-place。 Angular-xeditable 是基于 x-editable 开发的，但是是使用 AngularJ...
ngClip 是一个 AngularJS 的扩展指令，封装了 ZeroClipboard 实现了拷贝到剪贴板的功能。 示例代码： .config([&ngClipProvider&, function(ngClipProvider) {
ngClipProvider.setPath(&bower_components/...
最新新闻：
angular-next-starter-kit 是使用 Angular 1.x 开发的应用准备迁移到 Angular 2.0 的种子项目。 Angular 2.0 引入了一些新概念和设计模式，但是 Angular 2.0 还有几个月才能在生产环境使用。为了能让 Angular 1....
最新新闻：
使用 angular-file-upload 中的任何问题
：这个angular-file-upload-shim.min.js没法下载啊！
：用了华硕。。。
共有 73 个类似软件
Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在 AngularJS 应用中集成 High...
ngInfiniteScroll 是一个 AngularJS 的扩展指令，实现了网页的无限滚动的功能，也就...
AngularJS Toaster 是 AngularJS 的扩展，实现了无堵塞消息通知。该项目对 Toastr...
Satellizer 是一个简单易用的、端到端的基于 token 的 AngularJS 认证模块。内建对...
angular-oauth2 是 AngularJS 的 OAuth2 认证模块，使用 ES6 编写。 使用方法： 1....
Angular Beans 是一个使用 Java EE 7 和 CDI 规范轻松实现在 Java EE 应用中集成 ...
Angucomplete 是一个的指令扩展，实现了输入框自动完成的功能，外观简单直接，支持...
Angular-xeditable 是 AngularJS 指令绑定，允许创建（可编辑元素） editable ele...
ngClip 是一个 AngularJS 的扩展指令，封装了 ZeroClipboard 实现了拷贝到剪贴板的...
angular-next-starter-kit 是使用 Angular 1.x 开发的应用准备迁移到 Angular 2.0 ...
共有 177 人关注 angular-file-uploadangular-file-upload —— NG 文件上传扩展_开源中国_【传送门】
angular-file-upload —— NG 文件上传扩展
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。在线演示特性支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， PUT(html5)/POST 方法支持使用 Flash polyfill FileAPI
跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。当文件的内容类型使用 $upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http POST/PUT 请求的进度事件，更多内容请看 #88(comment) Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http 功能使用HTML:<script src="angular-file-upload-shim.min.js">script> <script src="angular.min.js">script><script src="angular-file-upload.min.js">script> <div ng-controller="MyCtrl"> <input type="text" ng-model="myModelObj"> <input type="file" ng-file-select="onFileSelect($files)"> <input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*"> <div class="button" ng-file-select="onFileSelect($files)" data-multiple="true">div> <div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function" ng-show="dropSupported">drop files herediv> <div ng-file-drop-available="dropSupported=true"
ng-show="!dropSupported">HTML5 Drop File is not supported!div> <button ng-click="upload.abort()">Cancel Uploadbutton>div>JS: $scope.onFileSelect = function($files) {
for (var i = 0; i < $files. i++) {
var file = $files[i]; $scope.upload = $upload.upload({ url: 'server/upload/url',
data: {myObj: $scope.myModelObj}, file: file,
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function(data, status, essay-headers, config) {
console.log(data); });
};}];-----------------------------------------------------------更多内容请看点击阅读原文～如果你觉得开源中国公众微信对你有帮助， 请点击右上角“...”标志分享到【朋友圈】，感谢您对开源中国社区的支持！点击文章标题下的“开源中国”蓝字，或者在微信搜索“开源中国”即可订阅 开源中国 微信。----------------------------—————————————————
觉得不错，分享给更多人看到
开源中国 微信二维码
分享这篇文章
11月4日 16:38
开源中国 最新文章
开源中国 热门文章