![](/img/trans.png)
[英]Remove Content-Disposition and Content-Type from request body using angular-file-upload
[英]Angular JS File upload Content Disposition
我是Angular JS的新手,並嘗試進行文件上傳。 我的要求是在單擊按鈕時提交多部分數據。
我在ng-model上無法讀取type =“ file”,因此我了解了解決方法,並復制了指令。 在執行完該指令后,在發送數據時沒有Content-disposition數據集。 我的意思是我想在服務器端閱讀的文件名,內容類型等。 這就是為什么我在headerOfFilePart.getFileName()
處獲取null的原因
我做錯了。 什么是實現我上面在Angular JS中描述的事情的正確方法。
<div ng-controller="uploadController">
<h2> Add Order </h2>
Enter your Name:
<input type="text" name="name" ng-model="myName"/>
<input type="file" fileread="vm.uploadme" />
<input type="button" name="button" ng-click='uploadFile()'/>
</div>
這是我的JS部分
validationApp.controller('uploadController', function($scope,$http,$location,$window) {
$scope.uploadFile = function() {
var fd = new FormData();
//Take the first selected file
fd.append("file", $scope.vm.uploadme);
fd.append("name", $scope.myName);
uploadUrl = "http://localhost:8080/IPOCCService/rest/UserManager/upload1";
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
}).
success(function(data, status, headers, config) {
alert(data);
}).
error(function(data, status, headers, config) {
alert("failure");
});
};
});
validationApp.directive("fileread", [function () {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.fileread = loadEvent.target.result;
});
};
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
};
}]);
REST JAVA
@POST
@Path("/upload1")
@Produces({ MediaType.APPLICATION_JSON} )
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response responseMsg3(FormDataMultiPart form) {
System.out.println("File Uploaded");
FormDataBodyPart filePart1 = form.getField("name");
System.out.println(filePart1.getName() + " = " +filePart1.getValue());
FormDataBodyPart filePart = form.getField("file");
ContentDisposition headerOfFilePart = filePart.getContentDisposition();
InputStream fileInputStream = filePart.getValueAs(InputStream.class);
String filePath = SERVER_UPLOAD_LOCATION_FOLDER + headerOfFilePart.getFileName();
// save the file to the server
saveFile(fileInputStream, filePath);
String output = "File saved to server location : " + filePath;
return Response.status(200).entity("true").build();
}
當您使用FileReader
讀取文件時, 僅文件內容分配給您的范圍:
scope.fileread = loadEvent.target.result;
就您而言,只需將文件分配給您的范圍即可:
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
scope.$apply(function(){
scope.fileread = changeEvent.target.files[0];
// changeEvent.target.files[0] is an HTML5 file object which contains ALL
// information about the file including fileName, contents,...
// scope.fileread is now assigned the selected file
});
});
}
app.directive('fileRead', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileread);
var modelSetter = model.assign;
element.bind('change', function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
}
}
readURL(this);
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
<input type="file" file-read="vm.uploadme" />
該指令對我有用。
您可以使用模塊ng-file-upload,該指令可對文件上傳進行所有操作。 請參閱此處
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.