角度上传多个文件
我遇到的情况是，我有一个表格，其中有一行，其中有两个文本字段条目，我必须上载该行的文件，并且这种行可以是“
N”，然后是可以在整个表单中输入的主文件，而这些文件是表单的一部分，我必须在单击保存按钮后立即提交所有这些文件。
我有点被ng-upload困扰，它需要一个api调用，而对于这种形式，我真的不能超过一个api调用。示例html代码如下：
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form editable-form name="xyzForm" ng-submit="create(model)">
<label>Tags: </label><input class="col-xs-12 col-md-12" ng-model="model.tags" type="text" name="Tags">
<label>Notes: </label> <input class="col-xs-12 col-md-11" ng-model="model.notes" type="text" name="notes">
<table class=" col-xs-3 col-md-11 table" border="1px solid red;">
<thead>
<tr>
<th>Product</th>
<th>Manufacturer</th>
<th>Location</th>
<th>Specification</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itemRow in item.singleItem">
<td><input type="text" class="xdTextBox" name="itemRow.name" ng-model="model.itemRow[$index].name" /></td>
<td><input type="text" class="xdTextBox" name="itemRow.manufacturer" ng-model="model.itemRow[$index].manufacturer" /></td>
<td><input type="text" class="xdTextBox" name="itemRow.location" ng-model="model.itemRow[$index].location" /></td>
<td><i class="pull-left glyphicon glyphicon-upload"><input type="file" name="itemRow.doc" ng-model="model.itemRow[$index].doc" multiple=false></i></td>
<td><i class="pull-left glyphicon glyphicon-remove"></i></td>
</tr>
</tbody>
</span>
</table>
<label>Product Spec: </label><input type="file" ng-model="prefabdoc" multiple="true" ngf-maxsize="15000000" />
</form>
</body>
</html>
问题答案：
这是文件值绑定指令示例..
http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview
js代码是：
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.files = [];
$scope.upload=function(){
alert($scope.files.length+" files selected ... Write your Upload Code");
};
});
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function () {
var values = [];
angular.forEach(element[0].files, function (item) {
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: URL.createObjectURL(item),
// File Input Value
_file: item
};
values.push(value);
});
scope.$apply(function () {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
HTML代码是：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"
data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="file" ng-file-model="files" multiple />
<button type="button" ng-click="upload()">Upload</button>
<p ng-repeat="file in files">
{{file.name}}
</p>
</body>
</html>
-
问题内容： 我正在使用和Path上传单个文件。代码如下： 对于一个文件，这很好用。我需要测试多个文件上传。如何传递多个文件？ 问题答案： Selenium仍然不支持多个文件上传： 但是，根据webdriver：upload多个文件，您应该能够 在Chrome中 通过使用换行符连接文件路径 来解决该问题： 另请参阅： 文件上传-在FireFox中上传多个文件
-
我是一个Angular初学者，我想知道如何创建Angular 5文件上传部分，我试图找到任何教程或文档，但我没有看到任何地方。对此有什么想法吗？我试过NG4文件，但对Angular 5不起作用
-
问题内容： 我有上传表格，允许用户上传多个文件。我决定，如果文件很大，则进度条会很好。下面是我的源代码。我是jQuery的新手，通常我只会使用php，但是我发现ajax更加用户友好。 图像上传正常，数组发送到ajax，但进度条不动。实际上，调用这两个函数的console.log都不会产生这种情况。有没有正确的方法来调用我的ajax请求中的函数，以使此进度条正常工作。 beforeSubmit：be
-
本文向大家介绍带有多个进度条的HTML5文件上传，包括了带有多个进度条的HTML5文件上传的使用技巧和注意事项，需要的朋友参考一下 为了使其正常工作，您需要解决xhr progress事件，该事件在所有列表项都已创建后就会触发。 该XHR 应该知道你想做什么-
-
问题内容： 我遇到了这个简单的js ajax上传代码（由于某种原因，jquery 似乎不适用于HTML5）， 但是我这里有两个问题， 这条线在物体之后是什么意思？ 为什么在那里需要ID？我能做些什么使用jQuery 用？ 此ajax仅用于单个文件上传，如何更改多个文件上传？ 问题答案： 这行在对象FormData之后是什么意思？ 在得到由它的ID元件。该抓住从元件中的第一选择的文件。将其追加到与字
-
问题内容： 我的测试需要在不同的浏览器中上传测试文件（我使用+ ）。对于单个文件上传，一切正常。我只是发送路径 Firefox：我找不到正确的语法。 任何想法？ 所有浏览器都有通用的语法吗？ 问题答案： 据我所知，硒 仍然 不支持多个文件上传（请参阅google code上的问题 ）。 至少有一种解决方法：显然创建一个包含所需输入字段的表单。这不是最佳的解决方案，因为它（可能）需要更改您的代码才能