내 HTML 양식은 다음과 같습니다.
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>로컬 컴퓨터에서 이미지를 업로드하고 업로드 한 파일의 내용을 읽고 싶습니다. 이 모든 것은 AngularJS를 사용하고 싶습니다.
값을 인쇄하려고하면 $scope.file정의되지 않은 것으로 나타납니다.
답변:
여기에있는 답변 중 일부는을 사용하도록 제안 FormData()하지만 불행히도 Internet Explorer 9 이하에서는 사용할 수없는 브라우저 객체입니다. 이전 브라우저를 지원해야하는 경우 <iframe>또는 사용과 같은 백업 전략이 필요합니다 .
파일 업로드를 수행하기위한 많은 Angular.js 모듈이 이미 있습니다. 이 두 가지는 이전 브라우저를 명시 적으로 지원합니다.
그리고 다른 옵션들 :
이 중 하나는 프로젝트에 적합해야하거나 직접 코딩하는 방법에 대한 통찰력을 제공 할 수 있습니다.
가장 쉬운 방법은 HTML5 API를 사용하는 것입니다. FileReader
HTML은 매우 간단합니다.
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>컨트롤러에서 'add'메소드를 정의하십시오.
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}
r.readAsBinaryString(f);
}브라우저 호환성
데스크탑 브라우저
Edge 12, Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Opera * 12.02, Safari 6.0.2
모바일 브라우저
Firefox (Gecko) 32, Chrome 3, Opera * 11.5, Safari 6.1
참고 : readAsBinaryString () 메서드는 사용되지 않으며 대신 readAsArrayBuffer ()를 사용해야합니다.
onloadend콜백 함수 내에서 처리 할 수 있습니다 . 이 API를 사용하기 위해 라이브러리가 필요하지 않습니다 (이전 API를 사용하지 않는 한). 도움이 되었기를 바랍니다.
readAsArrayBuffer일반적인 비동기 FileReader API 대신 FileReaderSync의 메소드 (웹 워커에서만 사용 가능)를 참조하는 특별한 이유 가 있습니까?
타사 라이브러리가없는 최신 브라우저 방식입니다. 모든 최신 브라우저에서 작동합니다.
app.directive('myDirective', function (httpPostFactory) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attr) {
element.bind('change', function () {
var formData = new FormData();
formData.append('file', element[0].files[0]);
httpPostFactory('upload_image.php', formData, function (callback) {
// recieve image name to use in a ng-src
console.log(callback);
});
});
}
};
});
app.factory('httpPostFactory', function ($http) {
return function (file, data, callback) {
$http({
url: file,
method: "POST",
data: data,
headers: {'Content-Type': undefined}
}).success(function (response) {
callback(response);
});
};
});HTML :
<input data-my-Directive type="file" name="file">PHP :
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
// uploads image in the folder images
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);
// give callback to your angular code with the image src name
echo json_encode($newfilename);
}JS 바이올린 (프론트 엔드 전용) https://jsfiddle.net/vince123/8d18tsey/31/
ng-submit양식 작업 이 필요 합니까? 이것만으로는 아무것도하지 않습니다
다음은 파일 업로드의 실제 예입니다.
http://jsfiddle.net/vishalvasani/4hqVu/
이 하나의 함수에서
setFiles컨트롤러에서 파일 배열을 업데이트하는 View에서
또는
AngularJS를 사용하여 jQuery 파일 업로드를 확인할 수 있습니다
flow.js를 사용하여 멋진 파일 및 폴더 업로드를 얻을 수 있습니다 .
https://github.com/flowjs/ng-flow
여기서 데모를 확인하십시오
http://flowjs.github.io/ng-flow/
IE7, IE8, IE9를 지원하지 않으므로 결국 호환성 계층을 사용해야합니다
onchange이벤트를 사용하여 입력 파일 요소를 함수에 전달하십시오.
<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />
따라서 사용자가 파일을 선택하면 "추가"또는 "업로드"버튼을 클릭하지 않아도 파일을 참조 할 수 있습니다.
$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};@Anoyz (정답)가 제공하는 모든 대안을 시도했지만 가장 좋은 해결책은 https://github.com/danialfarid/angular-file-upload입니다.
일부 특징 :
그것은 나를 위해 잘 작동합니다. 지시 사항에만주의를 기울여야합니다.
서버 측에서는 NodeJs, Express 4 및 Multer 미들웨어를 사용하여 멀티 파트 요청을 관리합니다.
nlzt9LJWRrAZEO3ZteZUOgGc.png 형식으로 저장 되지만 .png 형식으로 저장 되지 않습니다. 그것을 추가하는 방법?
<html>
<head></head>
<body ng-app = "myApp">
<form ng-controller = "myCtrl">
<input type = "file" file-model="files" multiple/>
<button ng-click = "uploadFile()">upload me</button>
<li ng-repeat="file in files">{{file.name}}</li>
</form> <script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function(){
$parse(attrs.fileModel).assign(scope,element[0].files)
scope.$apply();
});
}
};
}]).controller('myCtrl', ['$scope', '$http', function($scope, $http){
$scope.uploadFile=function(){
var fd=new FormData();
console.log($scope.files);
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
$http.post('http://localhost:1337/mediaobject/upload',fd,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(d)
{
console.log(d);
})
}
}]);
</script>
이 <input type=file>요소는 기본적으로 ng-model 지시문 과 함께 작동하지 않습니다 . 사용자 지정 지시문 이 필요합니다 .
select-ng-files 과 작동하는 지시문의 실무 데모ng-modelangular.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>$http.postA로부터 파일리스트$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);
};File 객체 와 함께 POST를 보낼 때 설정하는 것이 중요합니다 'Content-Type': undefined. XHR의 전송 방법은 다음 감지 File 객체를 자동으로 콘텐츠 형식을 설정합니다.
지시문으로 쉽게
HTML :
<input type="file" file-upload multiple/>JS :
app.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};지시문에서 우리는 새로운 범위가 생성되었는지 확인한 다음 파일 입력 요소의 변경 사항을 수신합니다. 변경 사항이 감지되면 파일 오브젝트를 매개 변수로 사용하여 모든 상위 범위 (위)에 이벤트를 생성합니다.
컨트롤러에서 :
$scope.files = [];
//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.push(args.file);
});
});그런 다음 아약스 전화에서 :
data: { model: $scope.model, files: $scope.files }http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/
나는 이것이 각도 파일 업로드라고 생각합니다.
파일을 업로드하기위한 경량 Angular JS 지시문
여기 DEMO 페이지가 있습니다.
파일과 json 데이터가 동시에 업로드됩니다.
// FIRST SOLUTION
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
formData.append("file", data.files);
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF FIRST SOLUTION
// SECOND SOLUTION
// If you can add plural file and If above code give an error.
// You can try following code
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files.length; i++) {
// add each file to
// the form data and iteratively name them
formData.append("file" + i, data.files[i]);
}
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF SECOND SOLUTIONFormData안전하고 빠른 객체를 사용할 수 있습니다 .
// Store the file object when input field is changed
$scope.contentChanged = function(event){
if (!event.files.length)
return null;
$scope.content = new FormData();
$scope.content.append('fileUpload', event.files[0]);
$scope.$apply();
}
// Upload the file over HTTP
$scope.upload = function(){
$http({
method: 'POST',
url: '/remote/url',
headers: {'Content-Type': undefined },
data: $scope.content,
}).success(function(response) {
// Uploading complete
console.log('Request finished', response);
});
}<input type="file" ng-change="contentChanged($event)">어떻게해야합니까?
http://jsfiddle.net/vishalvasani/4hqVu/ 는 크롬과 IE에서 잘 작동합니다 (배경 이미지에서 CSS를 약간 업데이트하는 경우). 진행률 표시 줄을 업데이트하는 데 사용됩니다.
scope.progress = Math.round(evt.loaded * 100 / evt.total)FireFox angular의 [백분율] 데이터는 파일이 성공적으로 업로드되지만 DOM에서 성공적으로 업데이트되지 않습니다.
load경우 이벤트 를 청취 할 수 있으며 길이가 계산 가능한 경우 진행 이벤트를 시작하여 업로드에 성공했음을 나타냅니다. github.com/danialfarid/angular-file-upload가 이미 처리하고 있습니다.
Uploadcare 와 같은 파일 업로드를 위해 IaaS를 고려할 수 있습니다 . https://github.com/uploadcare/angular-uploadcare를 위한 Angular 패키지가 있습니다.
기술적으로 이것은 지시문으로 구현되어 다른 업로드 옵션과 위젯 내에서 업로드 된 이미지 조작을 제공합니다.
<uploadcare-widget
ng-model="object.image.info.uuid"
data-public-key="YOURKEYHERE"
data-locale="en"
data-tabs="file url"
data-images-only="true"
data-path-value="true"
data-preview-step="true"
data-clearable="true"
data-multiple="false"
data-crop="400:200"
on-upload-complete="onUCUploadComplete(info)"
on-widget-ready="onUCWidgetReady(widget)"
value="{{ object.image.info.cdnUrl }}"
/>사용할 추가 구성 옵션 : https://uploadcare.com/widget/configure/
이것이 늦은 항목이라는 것을 알고 있지만 간단한 업로드 지시문을 만들었습니다. 당신은 곧 일할 수 있습니다!
<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />Web API를 사용하는 예제를 통해 Github에서 더 간단하게 업로드 할 수 있습니다 .
HTML
<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />컨트롤러에 'profileimage ()'메소드 추가
$scope.profileimage = function(selectimage) {
console.log(selectimage.files[0]);
var selectfile=selectimage.files[0];
r = new FileReader();
r.onloadend = function (e) {
debugger;
var data = e.target.result;
}
r.readAsBinaryString(selectfile);
}이것은 @ jquery-guru의 답변에 대한 업데이트 / 주석이어야하지만 충분한 담당자가 없기 때문에 여기로 갈 것입니다. 이제 코드에서 생성 된 오류를 수정합니다.
https://jsfiddle.net/vzhrqotw/
변경 사항은 기본적으로 다음과 같습니다.
FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {에:
app.controller('FileUploadCtrl', function($scope)
{원하는 경우 더 적절한 위치로 자유롭게 이동하십시오.
모든 스레드를 읽었으며 HTML5 API 솔루션이 가장 좋았습니다. 그러나 바이너리 파일을 변경하여 조사하지 않은 방식으로 손상시킵니다. 나를 위해 완벽하게 작동하는 솔루션은 다음과 같습니다.
HTML :
<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
Upload
</button>JS :
msds_update = function() {
var f = document.getElementById('msds').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
console.log(data);
var fd = new FormData();
fd.append('file', data);
fd.append('file_name', f.name);
$http.post('server_handler.php', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('success');
})
.error(function(){
console.log('error');
});
};
r.readAsDataURL(f);
}서버 측 (PHP) :
$file_content = $_POST['file'];
$file_content = substr($file_content,
strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);아래 코드를 사용하여 AngularJS를 사용하여 파일을 업로드 할 수 있습니다.
file기능을 위해 통과해야하는 인수 ngUploadFileUpload입니다$scope.file 귀하의 질문에 따라.
여기서 핵심은를 사용하는 것 transformRequest: []입니다. 이렇게하면 $ http가 파일 내용을 망칠 수 없습니다.
function getFileBuffer(file) {
var deferred = new $q.defer();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise;
}
function ngUploadFileUpload(endPointUrl, file) {
var deferred = new $q.defer();
getFileBuffer(file).then(function (arrayBuffer) {
$http({
method: 'POST',
url: endPointUrl,
headers: {
"accept": "application/json;odata=verbose",
'X-RequestDigest': spContext.securityValidation,
"content-length": arrayBuffer.byteLength
},
data: arrayBuffer,
transformRequest: []
}).then(function (data) {
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
console.error("Error", error)
});
}, function (error) {
console.error("Error", error)
});
return deferred.promise;
}위의 답변은 브라우저와 호환되지 않습니다. 일부 호환성 문제가있는 경우이를 시도하십시오.
코드보기
<div ng-controller="MyCtrl">
<input type="file" id="file" name="file"/>
<br>
<button ng-click="add()">Add</button>
<p>{{data}}</p>
</div>컨트롤러 코드
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data = 'none';
$scope.add = function(){
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e){
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++)
{
binary += String.fromCharCode(bytes[i]);
}
$scope.data = (binary).toString();
alert($scope.data);
}
r.readAsArrayBuffer(f);
}
}간단한 말로
HTML에서- 아래 코드 만 추가
<form name="upload" class="form" data-ng-submit="addFile()">
<input type="file" name="file" multiple
onchange="angular.element(this).scope().uploadedFile(this)" />
<button type="submit">Upload </button>
</form>컨트롤러에서 -이 기능은 "파일 업로드 버튼" 을 클릭하면 호출됩니다. 파일을 업로드합니다. 당신은 그것을 콘솔 수 있습니다.
$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}컨트롤러에 더 많은 코드를 추가하십시오-아래 코드는 함수에 추가됩니다. 이 기능은 "ahit (POST)"에 사용되는 버튼을 클릭하면 호출됩니다 . 파일 (업로드 된)과 양식 데이터를 백엔드로 보냅니다.
var url = httpURL + "/reporttojson"
var files=$scope.files;
for ( var i = 0; i < files.length; i++)
{
var fd = new FormData();
angular.forEach(files,function(file){
fd.append('file',file);
});
var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};
fd.append("data", JSON.stringify(data));
$http.post(url, fd, {
withCredentials : false,
headers : {
'Content-Type' : undefined
},
transformRequest : angular.identity
}).success(function(data)
{
toastr.success("Notification sent successfully","",{timeOut: 2000});
$scope.removereport()
$timeout(function() {
location.reload();
}, 1000);
}).error(function(data)
{
toastr.success("Error in Sending Notification","",{timeOut: 2000});
$scope.removereport()
});
}이 경우 .. 양식 데이터로 코드 아래에 추가
var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>angularJS 컨트롤러에서
$scope.submit_import_csv = function(){
var formData = new FormData(document.getElementById("csv_file_form"));
console.log(formData);
$.ajax({
url: "import",
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(result, textStatus, jqXHR)
{
console.log(result);
}
});
return false;
}우리는 HTML, CSS 및 AngularJS를 사용했습니다. 다음 예제는 AngularJS를 사용하여 파일을 업로드하는 방법을 보여줍니다.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
</body>
</html>단순 지시문 ( ng-file-model )을 사용한 작업 예 :
.directive("ngFileModel", [function () {
return {
$scope: {
ngFileModel: "="
},
link: function ($scope:any, element, attributes) {
element.bind("change", function (changeEvent:any) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
$scope.$apply(function () {
$scope.ngFileModel = {
lastModified: changeEvent.target.files[0].lastModified,
lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
name: changeEvent.target.files[0].name,
size: changeEvent.target.files[0].size,
type: changeEvent.target.files[0].type,
data: changeEvent.target.files[0]
};
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}])FormData함수에 파일을 업로드 하는 데 사용 하십시오.
var formData = new FormData();
formData.append("document", $scope.ngFileModel.data)
formData.append("user_id", $scope.userId)모든 크레딧은 https://github.com/mistralworks/ng-file-model 로 이동 하십시오
나는 당신이 그것을 확인할 수있는 작은 probelm에 직면했다 : https://github.com/mistralworks/ng-file-model/issues/7
마지막으로 갈래 리포지토리가 있습니다 : https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
코드는 파일을 삽입하는 데 도움이됩니다
<body ng-app = "myApp">
<form ng-controller="insert_Ctrl" method="post" action="" name="myForm" enctype="multipart/form-data" novalidate>
<div>
<p><input type="file" ng-model="myFile" class="form-control" onchange="angular.element(this).scope().uploadedFile(this)">
<span style="color:red" ng-show="(myForm.myFile.$error.required&&myForm.myFile.$touched)">Select Picture</span>
</p>
</div>
<div>
<input type="button" name="submit" ng-click="uploadFile()" class="btn-primary" ng-disabled="myForm.myFile.$invalid" value="insert">
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="insert.js"></script>
</body>insert.js
var app = angular.module('myApp',[]);
app.service('uploadFile', ['$http','$window', function ($http,$window) {
this.uploadFiletoServer = function(file,uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
alert("insert successfull");
$window.location.href = ' ';//your window location
})
.error(function(){
alert("Error");
});
}
}]);
app.controller('insert_Ctrl', ['$scope', 'uploadFile', function($scope, uploadFile){
$scope.uploadFile = function() {
$scope.myFile = $scope.files[0];
var file = $scope.myFile;
var url = "save_data.php";
uploadFile.uploadFiletoServer(file,url);
};
$scope.uploadedFile = function(element) {
var reader = new FileReader();
reader.onload = function(event) {
$scope.$apply(function($scope) {
$scope.files = element.files;
$scope.src = event.target.result
});
}
reader.readAsDataURL(element.files[0]);
}
}]);save_data.php
<?php
require "dbconnection.php";
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$image);
$query="insert into test_table values ('null','$image')";
mysqli_query($con,$query);
?>이 작동합니다
file.html
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
</body>
<script src="controller.js"></script>
</html>controller.js
var app = angular.module('app', []);
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(res){
console.log(res);
}).error(function(error){
console.log(error);
});
}
}]);
app.controller('fileCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload.php"; // upload url stands for api endpoint to handle upload to directory
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>fileupload.php
<?php
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],__DIR__. ' \\'.$image);
?>파일 업로드하다
<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />
$scope.uploadResume = function () {
var f = document.getElementById('resume').files[0];
$scope.selectedResumeName = f.name;
$scope.selectedResumeType = f.type;
r = new FileReader();
r.onloadend = function (e) {
$scope.data = e.target.result;
}
r.readAsDataURL(f);
};파일 다운로드 :
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);app.directive('ngUpload', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var options = {};
options.enableControls = attrs['uploadOptionsEnableControls'];
// get scope function to execute on successful form upload
if (attrs['ngUpload']) {
element.attr("target", "upload_iframe");
element.attr("method", "post");
// Append a timestamp field to the url to prevent browser caching results
element.attr("action", element.attr("action") + "?_t=" + new Date().getTime());
element.attr("enctype", "multipart/form-data");
element.attr("encoding", "multipart/form-data");
// Retrieve the callback function
var fn = attrs['ngUpload'].split('(')[0];
var callbackFn = scope.$eval(fn);
if (callbackFn == null || callbackFn == undefined || !angular.isFunction(callbackFn))
{
var message = "The expression on the ngUpload directive does not point to a valid function.";
// console.error(message);
throw message + "\n";
}
// Helper function to create new i frame for each form submission
var addNewDisposableIframe = function (submitControl) {
// create a new iframe
var iframe = $("<iframe id='upload_iframe' name='upload_iframe' border='0' width='0' height='0' style='width: 0px; height: 0px;
border: none; display: none' />");
// attach function to load event of the iframe
iframe.bind('load', function () {
// get content - requires jQuery
var content = iframe.contents().find('body').text();
// execute the upload response function in the active scope
scope.$apply(function () { callbackFn(content, content !== "" /* upload completed */); });
// remove iframe
if (content != "") // Fixes a bug in Google Chrome that dispose the iframe before content is ready.
setTimeout(function () { iframe.remove(); }, 250);
submitControl.attr('disabled', null);
submitControl.attr('title', 'Click to start upload.');
});
// add the new iframe to application
element.parent().append(iframe);
};
// 1) get the upload submit control(s) on the form (submitters must be decorated with the 'ng-upload-submit' class)
// 2) attach a handler to the controls' click event
$('.upload-submit', element).click(
function () {
addNewDisposableIframe($(this) /* pass the submit control */);
scope.$apply(function () { callbackFn("Please wait...", false /* upload not completed */); });
var enabled = true;
if (options.enableControls === null || options.enableControls === undefined || options.enableControls.length >= 0) {
// disable the submit control on click
$(this).attr('disabled', 'disabled');
enabled = false;
}
$(this).attr('title', (enabled ? '[ENABLED]: ' : '[DISABLED]: ') + 'Uploading, please wait...');
// submit the form
$(element).submit();
}
).attr('title', 'Click to start upload.');
}
else
alert("No callback function found on the ngUpload directive.");
}
};
});
<form class="form form-inline" name="uploadForm" id="uploadForm"
ng-upload="uploadForm12" action="rest/uploadHelpFile" method="post"
enctype="multipart/form-data" style="margin-top: 3px;margin-left:
6px"> <button type="submit" id="mbUploadBtn" class="upload-submit"
ng-hide="true"></button> </form>
@RequestMapping(value = "/uploadHelpFile", method =
RequestMethod.POST) public @ResponseBody String
uploadHelpFile(@RequestParam(value = "file") CommonsMultipartFile[]
file,@RequestParam(value = "fileName") String
fileName,@RequestParam(value = "helpFileType") String
helpFileType,@RequestParam(value = "helpFileName") String
helpFileName) { }