반응형
Angularjs 멀티파트 폼 데이터 및 파일 업로드 방법
저는 angular.js는 초보지만 기본은 잘 알고 있습니다.
제가 원하는 것은 파일과 일부 양식 데이터를 멀티파트 양식 데이터로 업로드하는 것입니다.각진 기능은 아니지만 서드파티 라이브러리는 할 수 있습니다.git를 통해 angular-file-upload를 복제했지만, 여전히 간단한 형식과 파일을 올릴 수 없습니다.
html과 js의 예를 들어주세요.
일단은
- 구조를 특별히 변경할 필요는 없습니다.HTML 입력 태그입니다.
<input accept="image/*" name="file" ng-value="fileToUpload"
value="{{fileToUpload}}" file-model="fileToUpload"
set-file-data="fileToUpload = value;"
type="file" id="my_file" />1.2 독자적인 지시문을 작성한다.
.directive("fileModel",function() {
return {
restrict: 'EA',
scope: {
setFileData: "&"
},
link: function(scope, ele, attrs) {
ele.on('change', function() {
scope.$apply(function() {
var val = ele[0].files[0];
scope.setFileData({ value: val });
});
});
}
}
})- $httpProvider가 있는 모듈에서는 (Accept, Content-Type 등)와 같은 종속성을 멀티파트/폼데이터에 추가합니다.(json 형식으로 응답을 받아들이는 것이 좋습니다.) 예:
$httpProvider.defaults 입니다.headers.post [ ]동의' = 'application/json, text/subscript', $httpProvider.defaults.headers.post ['Content-Type']= 'form-data; charset=utf-8';
그런 다음 폼 제출 콜을 처리하는 별도의 함수를 컨트롤러에 만듭니다.예를 들어 아래 코드:
서비스 함수에서는 서버가 "바이트 오류"를 발생시키지 않도록 "responseType" 매개 변수를 의도적으로 처리합니다.
transformRequest: 연결된 ID로 요청 형식을 변경합니다.
withCredentials : false(HTTP 인증 정보).
in controller:
// code this accordingly, so that your file object
// will be picked up in service call below.
fileUpload.uploadFileToUrl(file);
in service:
.service('fileUpload', ['$http', 'ajaxService',
function($http, ajaxService) {
this.uploadFileToUrl = function(data) {
var data = {}; //file object
var fd = new FormData();
fd.append('file', data.file);
$http.post("endpoint server path to whom sending file", fd, {
withCredentials: false,
headers: {
'Content-Type': undefined
},
transformRequest: angular.identity,
params: {
fd
},
responseType: "arraybuffer"
})
.then(function(response) {
var data = response.data;
var status = response.status;
console.log(data);
if (status == 200 || status == 202) //do whatever in success
else // handle error in else if needed
})
.catch(function(error) {
console.log(error.status);
// handle else calls
});
}
}
}])<script src="//unpkg.com/angular/angular.js"></script>프로젝트 데모 페이지를 복사하기만 하면 됩니다.업로드 진행상황과 함께 제출 양식에 단일 파일을 업로드 할 수 있습니다.
(function (angular) {
'use strict';
angular.module('uploadModule', [])
.controller('uploadCtrl', [
'$scope',
'$upload',
function ($scope, $upload) {
$scope.model = {};
$scope.selectedFile = [];
$scope.uploadProgress = 0;
$scope.uploadFile = function () {
var file = $scope.selectedFile[0];
$scope.upload = $upload.upload({
url: 'api/upload',
method: 'POST',
data: angular.toJson($scope.model),
file: file
}).progress(function (evt) {
$scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10);
}).success(function (data) {
//do something
});
};
$scope.onFileSelect = function ($files) {
$scope.uploadProgress = 0;
$scope.selectedFile = $files;
};
}
])
.directive('progressBar', [
function () {
return {
link: function ($scope, el, attrs) {
$scope.$watch(attrs.progressBar, function (newValue) {
el.css('width', newValue.toString() + '%');
});
}
};
}
]);
}(angular));
HTML
<form ng-submit="uploadFile()">
<div class="row">
<div class="col-md-12">
<input type="text" ng-model="model.fileDescription" />
<input type="number" ng-model="model.rating" />
<input type="checkbox" ng-model="model.isAGoodFile" />
<input type="file" ng-file-select="onFileSelect($files)">
<div class="progress" style="margin-top: 20px;">
<div class="progress-bar" progress-bar="uploadProgress" role="progressbar">
<span ng-bind="uploadProgress"></span>
<span>%</span>
</div>
</div>
<button button type="submit" class="btn btn-default btn-lg">
<i class="fa fa-cloud-upload"></i>
<span>Upload File</span>
</button>
</div>
</div>
</form>
편집: 파일 포스트에 모델을 서버에 전달했습니다.
입력 요소의 폼 데이터는 포스트의 데이터 속성으로 전송되며 일반 폼 값으로 사용할 수 있습니다.
파일을 직접 보내는 것이 더 효율적입니다.
base64 부호화Content-Type: multipart/form-data33%의 오버헤드가 추가됩니다.서버가 서포트하고 있는 경우는, 직접 파일을 송신하는 것이 효율적입니다.
복수 실행$http.postFileList에서 직접 요청
$scope.upload = function(url, fileList) {
var config = {
headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
var promises = fileList.map(function(file) {
return $http.post(url, file, config);
});
return $q.all(promises);
};
파일 오브젝트와 함께 POST를 송신할 때는,'Content-Type': undefined그러면 XHR 전송 메서드가 File 객체를 검출하고 콘텐츠 유형을 자동으로 설정합니다.
와 연동되는 "select-ng-files" 명령의 작업 데모ng-model1
<input type=file>요소는 기본적으로는 ng-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="fileList" multiple>
<h2>Files</h2>
<div ng-repeat="file in fileList">
{{file.name}}
</div>
</body>이 방법으로 이미지와 폼 데이터를 모두 전송할 수 있습니다.
<div class="form-group ml-5 mt-4" ng-app="myApp" ng-controller="myCtrl">
<label for="image_name">Image Name:</label>
<input type="text" placeholder="Image name" ng-model="fileName" class="form-control" required>
<br>
<br>
<input id="file_src" type="file" accept="image/jpeg" file-input="files" >
<br>
{{file_name}}
<img class="rounded mt-2 mb-2 " id="prvw_img" width="150" height="100" >
<hr>
<button class="btn btn-info" ng-click="uploadFile()">Upload</button>
<br>
<div ng-show = "IsVisible" class="alert alert-info w-100 shadow mt-2" role="alert">
<strong> {{response_msg}} </strong>
</div>
<div class="alert alert-danger " id="filealert"> <strong> File Size should be less than 4 MB </strong></div>
</div>
각도 JS 코드
var app = angular.module("myApp", []);
app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
app.controller("myCtrl", function($scope, $http){
$scope.IsVisible = false;
$scope.uploadFile = function(){
var form_data = new FormData();
angular.forEach($scope.files, function(file){
form_data.append('file', file); //form file
form_data.append('file_Name',$scope.fileName); //form text data
});
$http.post('upload.php', form_data,
{
//'file_Name':$scope.file_name;
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
$scope.IsVisible = $scope.IsVisible = true;
$scope.response_msg=response;
// alert(response);
// $scope.select();
});
}
});
언급URL : https://stackoverflow.com/questions/24443246/angularjs-how-to-upload-multipart-form-data-and-a-file
반응형
'programing' 카테고리의 다른 글
| Wordpress에서 다른 관리 페이지로 리디렉션하는 방법 (0) | 2023.03.17 |
|---|---|
| JSON simplejson을 사용한 장고 모델 시리얼화 (0) | 2023.03.17 |
| @SpringBootApplication을 STS 유형으로 해결할 수 없음 (0) | 2023.03.17 |
| PHP, jQuery 및 AJAX를 사용하여 여러 파일을 업로드하는 방법 (0) | 2023.03.17 |
| 클래스는 React를 확장합니다.구성 요소가 반응에서 getInitialState를 사용할 수 없음 (0) | 2023.03.17 |