AngularJSを使用したファイルアップロード
これが私のHTMLフォームです：
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
ローカルマシンから画像をアップロードし、アップロードしたファイルの内容を読みたいのですが。これをすべてAngularJSを使用して行います。
$scope.fileの値を表示しようとすると、undefinedと表示されます。
ここでの答えのいくつかはFormData()を使うことを提案します、しかし残念ながらそれはInternet Explorer 9以下で利用できないブラウザオブジェクトです。これらの古いブラウザをサポートする必要がある場合は、<iframe>やFlashを使用するなどのバックアップ戦略が必要になります。
ファイルのアップロードを実行するためのAngular.jsモジュールは既にたくさんあります。これら2つは、古いブラウザを明示的にサポートしています。
- https://github.com/leon/angular-upload - iframeを代替として使用します
- https://github.com/danialfarid/ng-file-upload - FileAPI/Flashをフォールバックとして使用
そして他のいくつかのオプション：
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
これらのうちの1つはあなたのプロジェクトに合うべきであるか、またはあなた自身でそれをコーディングする方法への洞察をあなたに与えるかもしれません。
最も簡単なのは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);
}
ブラウザの互換性
デスクトップブラウザ
Firefox（Gecko）3.6（1.9.2）、Chrome 7、Internet Explorer * 10、Opera * 12.02、Safari 6.0.2
携帯ブラウザ
Firefox（Gecko）32、Chrome 3、Internet Explorer * 10、Opera * 11.5、Safari 6.1
注：readAsBinaryString（）メソッドは推奨されていません。代わりに readAsArrayBuffer（） を使用してください。
これは2015年の方法ですが、サードパーティのライブラリはありません。最新のブラウザすべてで動作します。
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/
下記はファイルアップロードの実用的な例です。
http://jsfiddle.net/vishalvasani/4hqVu/
この1つの関数では
setFiles
コントローラからファイル配列を更新するビューから
または
AngularJSを使用してjQueryファイルのアップロードを確認できます。
flow.js を使用して、Niceファイルとフォルダのアップロードを実現できます。
https://github.com/flowjs/ng-flow
こちらのデモをチェックしてください
http://flowjs.github.io/ng-flow/
IE7、IE8、IE9はサポートされていないので、最終的には互換性レイヤを使用する必要があります。
私は@Anoyz（正解）が与えるすべての選択肢を試しました...そして最良の解決策は https://github.com/danialfarid/angular-file-upload
いくつかの機能：
- 進捗
- マルチファイル
- フィールド
- 古いブラウザ（IE 8 - 9）
それは私にとってはうまくいきます。あなたはただ指示に注意を払う必要があります。
サーバーサイドではNodeJ、Express 4、Multerミドルウェアを使ってマルチパートリクエストを管理します。
onchangeイベントを使用して、入力ファイルの要素を関数に渡します。
<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />
そのため、ユーザーがファイルを選択すると、ユーザーが「追加」または「アップロード」ボタンをクリックする必要なしに、ファイルへの参照があります。
$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};
HTML
<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ディレクティブ では機能しません。 カスタムディレクティブ ：が必要です。
return-filesで動作するng-modelディレクティブの実用的なデモ1
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>からの$http.post - FileList
$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のsendメソッド は 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] });
}
});
}
};
ディレクティブでは、新しいスコープが作成されたことを確認してから、ファイルのinput要素に加えられた変更を監視します。変更が検出されたときは、ファイルオブジェクトをパラメータとして使用して、すべての先祖スコープ（上方向）にイベントを発行します。
あなたのコントローラで：
$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);
});
});
それからあなたのajax呼び出しで：
data: { model: $scope.model, files: $scope.files }
http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/ /
これは角度ファイルのアップロードだと思います。
ngファイルアップロード
ファイルをアップロードするための軽量Angular JSディレクティブ。
これが _ demo _ のページです。
- アップロードの進行状況、進行中のアップロードのキャンセル/中止、ファイルのドラッグアンドドロップ（html5）、ディレクトリのドラッグアンドドロップ（webkit）、CORS、PUT（html5）/ POSTメソッド、ファイルタイプとサイズの検証、選択画像のプレビュー表示/オーディオ/ビデオ。
- クロスブラウザファイルアップロードおよびFileReader（HTML 5および非HTML 5）とFlash polyfill FileAPI。ファイルをアップロードする前にクライアント側の検証/変更を許可します
- Upload.http（）を使用してファイルのコンテンツタイプでdbサービスCouchDB、imgurなどに直接アップロードします。これにより、角度のあるHTTP POST/PUT要求に対するprogressイベントが有効になります。
- 別々のシムファイル、FileAPIファイルは、HTML5以外のコードの要求に応じてロードされます。HTML5のサポートが必要な場合は、追加のロード/コードは不要です。
- 通常の$ httpを使用して（HTML5以外のブラウザの場合はshimを使用して）軽量化されているため、すべての詳細な$ http機能を使用できます。
ファイルと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
// İf you can add plural file and İf 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 SOLUTION安全で速いFormDataオブジェクトを使うことができます。
// 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" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />
ng-simple-upload Web APIを使った例を含むGithubについての詳細。
http://jsfiddle.net/vishalvasani/4hqVu/ chromeとIEでうまく動作します（background-imageでCSSを少し更新すると）。これはプログレスバーを更新するために使用されます。
scope.progress = Math.round(evt.loaded * 100 / evt.total)
しかしFireFoxでは、Angularの[percent]データはDOMで正常に更新されませんが、ファイルは正常にアップロードされています。
Uploadcare のように、ファイルのアップロードにIaaSを検討することができます。そのためのAngularパッケージがあります： https://github.com/uploadcare/angular-uploadcare
技術的には、それはディレクティブとして実装され、アップロードのためのさまざまなオプション、およびウィジェット内のアップロードされた画像の操作を提供します。
<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/
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);
}
私はすべてのスレッドを読みました、そして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);
これは@ jquery-guruの答えに対する更新/コメントであるべきですが、私は十分な担当者を持っていないのでここに行くでしょう。それは今コードによって生成されるエラーを修正します。
https://jsfiddle.net/vzhrqotw/
変更は基本的に次のとおりです。
FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {
に：
app.controller('FileUploadCtrl', function($scope)
{
必要に応じて、より適切な場所に移動してください。
以下のコードを使って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、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>
簡単な言葉で
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;
});
}
コントローラにさらに追加する - 以下のコードを関数に追加する。この機能は使用するボタンをクリックしたときに呼び出されます "api（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
};
作業例 簡単な指令を使用する（ 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 になります
私はあなたがここでそれをチェックすることができる小さな問題に直面しました： https://github.com/mistralworks/ng-file-model/issues/7
最後に、ここにフォークされたレポがある： https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
ファイルをアップロードする
<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):/);
}]);
この作品
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);
?>
コードはファイルを挿入するのに役立ちます
<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);
?>
<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;
}