সরাসরি ফাইল পাঠানো আরও দক্ষ।
করুন Base64- এনকোডিং এর Content-Type: multipart/form-dataএকটি অতিরিক্ত 33% ওভারহেড যোগ করা হয়েছে। সার্ভার যদি এটি সমর্থন করে তবে সরাসরি ফাইলগুলি প্রেরণ করা আরও দক্ষ is
$scope.upload = function(url, file) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
return $http.post(url, file, config);
};
কোনও ফাইল অবজেক্টের সাথে কোনও পোষ্ট পাঠানোর সময় এটি সেট করা গুরুত্বপূর্ণ 'Content-Type': undefined। XHR পাঠান পদ্ধতি তারপর নির্ণয় করতে পারবে ফাইল বস্তুর এবং স্বয়ংক্রিয়ভাবে বিষয়বস্তুর প্রকার সেট।
একাধিক ফাইল প্রেরণ করতে, সরাসরি কোনও ফাইললিস্ট থেকে একাধিক অনুরোধ করা দেখুন$http.post
আমি অনুভব করেছি যে আমার ইনপুট টাইপ = "ফাইল" দিয়ে শুরু করা উচিত, তবে তখন জানতে পেরেছিলাম যে কৌণিক জেএস এর সাথে আবদ্ধ হতে পারে না ..
<input type=file>উপাদান সঙ্গে ডিফল্ট কাজ না NG মডেল নির্দেশ । এটির জন্য একটি কাস্টম নির্দেশিকা প্রয়োজন :
"সিলেক্ট-এনজি-ফাইলস" এর নির্দেশিকা যা 1 এর সাথে কাজ করে Workingng-model
angular.module("app",[]);
angular.module("app").directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" select-ng-files ng-model="fileArray" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileArray">
{{file.name}}
</div>
</body>
$http.post বিষয়বস্তু টাইপ সহ multipart/form-data
যদি অবশ্যই পাঠাতে হয় multipart/form-data:
<form role="form" enctype="multipart/form-data" name="myForm">
<input type="text" ng-model="fdata.UserName">
<input type="text" ng-model="fdata.FirstName">
<input type="file" select-ng-files ng-model="filesArray" multiple>
<button type="submit" ng-click="upload()">save</button>
</form>
$scope.upload = function() {
var fd = new FormData();
fd.append("data", angular.toJson($scope.fdata));
for (i=0; i<$scope.filesArray.length; i++) {
fd.append("file"+i, $scope.filesArray[i]);
};
var config = { headers: {'Content-Type': undefined},
transformRequest: angular.identity
}
return $http.post(url, fd, config);
};
ফর্মডেটা এপিআই সহ কোনও পোষ্ট প্রেরণ করার সময় এটি সেট করা গুরুত্বপূর্ণ 'Content-Type': undefined। XHR পাঠান পদ্ধতি তারপর নির্ণয় করতে পারবে FormDataবস্তু এবং স্বয়ংক্রিয়ভাবে বিষয়বস্তুর প্রকার হেডার সেট একাধিক / ফর্ম-ডেটা সঙ্গে সঠিক সীমানা ।