关键词：
【中文标题】Angularjs上传多个文件【英文标题】：Angularjs uploading multiple files 【发布时间】：2020-04-24 10:49:33 【问题描述】：我们的团队正在 ServiceNow 中进行开发，需要能够上传文档并将其附加到案例记录中。在浏览了几个示例之后，我们有一个工作示例。我们的 HTML 如下所示：
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
在我们的控制器中，我们有以下内容：
$scope.uploadFile = function()
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
;
我们还创建了一个名为 fileUpload 的依赖项：
var myApp = angular.module('myApp', []);
myApp.service('fileUpload', ['$http', function ($http)
this.uploadFileToUrl = function(file, uploadUrl)
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd,
transformRequest: angular.identity,
headers: 'Content-Type': undefined
)
.success(function()
)
.error(function()
);
;
]);
最后，我们有一个名为 fileModel 的 Angular 提供程序：
function fileModel($parse)
return
restrict: 'A',
link: function(scope, element, attrs)
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function()
scope.$apply(function()
modelSetter(scope, element[0].files[0]);
);
);
;
有没有办法修改它，以便我们可以上传多个文件而不是一个？我们在 HTML 中添加了“多个”，但我们的控制台中只显示了 1 个文件。我认为我们遗漏了一些非常明显的东西，但似乎无法弄清楚......
【问题讨论】：
【参考方案1】：试试这个代码并检查控制台。
<body ng-app="fileUpload" ng-controller="MyCtrl">
<input type="file" multiple="true" id="fileUpload" file="file"/>
<button ng-click="uploadFile()">upload me</button>
</body>
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout)
$scope.uploadFile = function ()
var fd = new FormData();
angular.forEach($scope.file, function (value, key)
fd.append(key, value);
);
for (var pair of fd.entries())
console.log(pair[0]+ ', ' + pair[1]);
console.log("hi")
;
]);
app.directive('file', function ()
return
scope:
file: '='
,
link: function (scope, el, attrs)
el.bind('change', function (event)
var file = event.target.files;
scope.file = file ? file : undefined;
scope.$apply();
);
;
)
Codepen - https://jsfiddle.net/PratikPatel227/0rehq8g4/1/（其他）
【讨论】：
【参考方案2】：你添加了吗
multiple="true"
在你的 HTML 中？
【讨论】：
从多个文件上传 Firebase 存储中获取下载 url
...发布时间】：2017-07-0805:02:45【问题描述】：我是firebase和angularjs的新手，我在从firebase存储中获取下载url并将它们存储在firebase实时数据库中时遇到了困难。我能够将多个文件上传到Firebase存储。问题是当我将下载u 查看详情
Angularjs - 使用 php 上传文件
】Angularjs-使用php上传文件【英文标题】：Angularjs-Fileuploadwithphp【发布时间】：2013-12-2712:59:49【问题描述】：我花了几天时间寻找一个相当简单的angularjs文件上传方法集成，其中包括一个基本的php服务器端脚本..我需要一个简单的... 查看详情
angularjs使用$httppost上传文件的时候，怎样获取文件上传的进度
参考技术A对比一下文件大小 查看详情
无法上传文件，php和angularjs
】无法上传文件，php和angularjs【英文标题】：Can\'tuploadfiles,phpandangularjs【发布时间】：2014-11-2113:33:40【问题描述】：我正在尝试使用angularJs和PHP上传文件。我正在使用angular-file-upload，https://github.com/danialfarid/angular-file-upload。问题... 查看详情
如何使用 AngularJS 将文件上传到 Google Drive
】如何使用AngularJS将文件上传到GoogleDrive【英文标题】：HowtouploadfiletoGoogleDrivewithAngularJS【发布时间】：2015-12-1110:07:12【问题描述】：我卡住了，我无法使用AngularJS将文件上传到GoogleDrive。现在我的客户想知道他们想使用AngularJS将... 查看详情
angularjs上传图片和文件
很简单：$scope.upload=function(){ varf=$scope.myFile; varfd=newFormData(); varimg=document.querySelector(‘input[type=file]‘).files[0]; //varfile=[]; //file.push(f); //file.push(img); fd.appe 查看详情
使用 AngularJS 上传文件
】使用AngularJS上传文件【英文标题】：FileUploadusingAngularJS【发布时间】：2013-09-0510:21:53【问题描述】：这是我的HTML表单：<formname="myForm"ng-submit=""><inputng-model=\'file\'type="file"/><inputtype="submit"value=\'Submit\'/></for 查看详情
使用 AngularJS 和 SpringMVC 进行多部分文件上传
】使用AngularJS和SpringMVC进行多部分文件上传【英文标题】：MultipartFileUploadusingAngularJSandSpringMVC【发布时间】：2017-07-2900:45:09【问题描述】：我是angularJS的新手，并尝试使用angularJS和SpringMVC上传文件，但无法获得所需的解决方案并... 查看详情
webapi+angularjs文件上传和下载
开发框架前端angularJS1.6下载和保存文件FileSaver：https://github.com/eligrey/FileSaver.js/后端.netWebAPI1导入Excel文件关键代码1.1导入Excel弹出框1.2模态框html代码<divclass="modalfade"id="importExcelPop"tabindex="-1"role="dialog"aria- 查看详情
从AngularJS上传文件到NodeJS的交叉错误
】从AngularJS上传文件到NodeJS的交叉错误【英文标题】：CrosserroruploadingfilefromAngularJStoNodeJS【发布时间】：2014-08-2720:56:30【问题描述】：我在将文件从angularjs客户端上传到NodeJS服务器时遇到问题。错误：XMLHttpRequestcannotloadhttp://localh... 查看详情
AngularJS：使用 $resource 上传文件（解决方案）
】AngularJS：使用$resource上传文件（解决方案）【英文标题】：AngularJS:Uploadfilesusing$resource(solution)【发布时间】：2014-02-0215:27:20【问题描述】：我正在使用AngularJS与RESTful网络服务进行交互，使用$resource来抽象暴露的各种实体。其... 查看详情
在Laravel中通过AngularJs上传文件时获取值为null
】在Laravel中通过AngularJs上传文件时获取值为null【英文标题】：GettingvaluenullwhileuploadingfilethroughAngularJsinLaravel【发布时间】：2020-02-2704:32:19【问题描述】：当我尝试在AngularJs中使用POST请求上传文件时，我无法上传文件，因为它显... 查看详情
angularjs捕获音频并上传文件
】angularjs捕获音频并上传文件【英文标题】：angularjscaptureaudioanduploadfile【发布时间】：2018-09-2115:30:08【问题描述】：我正在构建一个网络应用程序，您可以在其中录制来自浏览器的音频，然后将其上传到服务器，以便其他用户... 查看详情
AngularJS文件上传抛出403 Forbidden - IIS Windows Server
】AngularJS文件上传抛出403Forbidden-IISWindowsServer【英文标题】：AngularJSFileUploadthrowing403Forbidden-IISWindowsServer【发布时间】：2021-10-0406:09:12【问题描述】：在我的应用程序中，我使用AngularJS文件上传来读取上传的excel文件。在我的控制... 查看详情
AngularJS：如何使用多部分表单实现简单的文件上传？
】AngularJS：如何使用多部分表单实现简单的文件上传？【英文标题】：AngularJS:howtoimplementasimplefileuploadwithmultipartform?【发布时间】：2012-12-0710:23:40【问题描述】：我想从AngularJS到node.js服务器做一个简单的多部分表单发布，表单的... 查看详情
Angularjs如何上传多部分表单数据和文件？
】Angularjs如何上传多部分表单数据和文件？【英文标题】：Angularjshowtouploadmultipartformdataandafile?【发布时间】：2014-08-1801:22:42【问题描述】：我是angular.js的初学者，但我对基础知识掌握得很好。我要做的是上传一个文件和一些表... 查看详情
如何从 angularjs 和 CORS 支持将文件上传到球衣
】如何从angularjs和CORS支持将文件上传到球衣【英文标题】：howtouploadfiletojerseyfromangularjsandCORSsupport【发布时间】：2017-03-1703:50:51【问题描述】：我正在尝试创建上传文件服务。所以我在服务器端关注theguidehere。theguidehere用于客户... 查看详情
angularjs上传图片
上传图片需要引入插件ngFileUpload，使用bower安装方法：bowerinstall ng-file-upload--save,安装后需要在命名app的名字js文件中注入，如下所示：(function(){angular.module(‘app‘,[‘ionic‘,‘ngStorage‘,‘ngFileUpload‘]);})();在相应的html中引入... 查看详情