我正在使用ng-file-upload选择多个文件。但我的要求是我想将这些选定的文件作为文件列表附加到我的 Js 对象中，并通过 REST 将该对象发送到服务器。到目前为止，我的数据插入部分在没有文件列表的情况下工作正常。
REST 服务代码片段
@POST
@Path("/manual")
@Produces(MediaType.APPLICATION_JSON)
public boolean insertResults(testVO testResult) {
for(Object o:testVO.getFiles()){
//File access code goes here
}
}
testVO.Java 类
private String fName;
private String lName;
private Object[] files;
... getter and setter methods goes here
JsFiddle HTML 表单
用于插入表单数据的 Angular Js 代码片段
$scope.insertResults= function(tc){
var result = {};
result.lName= tc.lName;
result.fName= tc.fName;
result.files=$scope.files; //This also works but i can not access file content
Service.ManualResult.insertResults({},result)
.$promise.then(function(data){
//succes code goes here
},function(error) {
//error
}
};
我的要求是如何发送文件列表以及表单数据并在服务器端访问每个上传的文件详细信息。
注意:当我从服务器端调用 testVO.getFiles() 时，我应该能够访问附加到每个请求的文件。
最佳答案
<强> Multiple File Upload using AngularJS :
服务器请求 JSON 文本和多部分文件数据。
客户端脚本及其 fiddle .
window.onload = function() {
var app = angular.module("myapp", []);
app.controller("uploadcontroller", function uploadcontrollerFun($scope, $http) {
$scope.files = [];
$scope.getFileDetails = function(e) {
$scope.$apply(function() {
for (var i = 0; i < e.files.length; i++) {
var isFileAvailable = false;
console.log("File Name " + e.files[i].name);
for (var j = 0; j < $scope.files.length; j++) {
if ($scope.files[j].name === e.files[i].name) {
isFileAvailable = true;
break;
}
}
if (!isFileAvailable) {
$scope.files.push(e.files[i]);
} else {
alert("file is already available ::" + e.files[i].name)
}
}
});
}
$scope.submitdata = function() {
var data = new FormData();
for (var i in $scope.files) {
data.append("uploadFile[" + i + "]", $scope.files[i]);
}
data.append("key1", 'email');
console.log("data",data);
var targetRequestPath = //'./UploadScenarioFiles'; // Controller URL
'http://localhost:8080/PerformanceUI/UploadScenarioFiles';
$http({
method: 'POST',
url: targetRequestPath,
headers: {
'Content-Type': undefined
},
data: data
}).then(function(response) {
console.log('Response Data : ', response.data);
callback(response.data);
})
}
});
}<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
</head>
<body>
<div class="form-group ng-scope" ng-app="myapp" ng-controller="uploadcontroller">
<label class="control-label col-sm-3"> Import File
<span class="error">*</span>
</label>
<div class="col-lg-6 col-sm-6 col-12">
<label class="btn btn-primary">
<input type="file" id="f" accept=".txt,.csv,.jmx " multiple="" onchange="angular.element(this).scope().getFileDetails(this);this.value=null;">
</label>
<br><br>
<button class="btn btn-success" ng-click="submitdata()"> submit </button>
</div>
</div>
</body>
</html>Spring Controller to
consume multipart and json text.
@RequestMapping(value = "/UploadScenarioFiles", method = RequestMethod.POST)
public void UploadscenarioFiles(HttpServletRequest request, HttpServletResponse response) {
String param1;
if (request != null) { // JSON Text
param1 = request.getParameter("key1");
}
MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
Iterator<String> fileNames = multipart.getFileNames();
while (fileNames.hasNext()) { // Get List of files from Multipart Request.
MultipartFile fileContent = multipart.getFile(fileNames.next());
// Save files to Local (or) any Storage server.
File file = new File("E:\\AA\\test\\"+fileContent.getOriginalFilename());
fileContent.transferTo( file );
}
}
我们可以在spring配置文件link中设置文件大小限制
<!-- setting maximum upload size -->
<beans:property name="maxUploadSize" value="100000" />
</beans:bean>
关于javascript - 如何在 angularjs 中发送多个文件以及表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34991498/