web-dev-qa-db-ja.com

AngularJSを使用したファイルアップロード

これが私のHTMLフォームです:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

ローカルマシンから画像をアップロードし、アップロードしたファイルの内容を読みたいのですが。これをすべてAngularJSを使用して行います。

$scope.fileの値を表示しようとすると、undefinedと表示されます。

284
Aditya Sethi

ここでの答えのいくつかはFormData()を使うことを提案します、しかし残念ながらそれはInternet Explorer 9以下で利用できないブラウザオブジェクトです。これらの古いブラウザをサポートする必要がある場合は、<iframe>やFlashを使用するなどのバックアップ戦略が必要になります。

ファイルのアップロードを実行するためのAngular.jsモジュールは既にたくさんあります。これら2つは、古いブラウザを明示的にサポートしています。

そして他のいくつかのオプション:

これらのうちの1つはあなたのプロジェクトに合うべきであるか、またはあなた自身でそれをコーディングする方法への洞察をあなたに与えるかもしれません。

338
Anoyz

最も簡単なのは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() を使用してください。

173
yagger

これは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/

54
Vince Verhoeven

下記はファイルアップロードの実用的な例です。

http://jsfiddle.net/vishalvasani/4hqVu/

この1つの関数では

setFiles

コントローラからファイル配列を更新するビューから

または

AngularJSを使用してjQueryファイルのアップロードを確認できます。

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

38
JQuery Guru

flow.js を使用して、Niceファイルとフォルダのアップロードを実現できます。

https://github.com/flowjs/ng-flow

こちらのデモをチェックしてください

http://flowjs.github.io/ng-flow/

IE7、IE8、IE9はサポートされていないので、最終的には互換性レイヤを使用する必要があります。

https://github.com/flowjs/fusty-flow.js

17
Fizer Khan

私は@Anoyz(正解)が与えるすべての選択肢を試しました...そして最良の解決策は https://github.com/danialfarid/angular-file-upload

いくつかの機能:

  • 進捗
  • マルチファイル
  • フィールド
  • 古いブラウザ(IE 8 - 9)

それは私にとってはうまくいきます。あなたはただ指示に注意を払う必要があります。

サーバーサイドではNodeJ、Express 4、Multerミドルウェアを使ってマルチパートリクエストを管理します。

11

onchangeイベントを使用して、入力ファイルの要素を関数に渡します。

<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />

そのため、ユーザーがファイルを選択すると、ユーザーが「追加」または「アップロード」ボタンをクリックする必要なしに、ファイルへの参照があります。

$scope.fileSelected = function (element) {
    var myFileSelected = element.files[0];
};
10
James Lawruk

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>
9
Manoj Ojha

<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オブジェクトを検出し そして自動的にコンテントタイプを設定します。

8
georgeawg

ディレクティブで簡単

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/ /

7
Asher

これは角度ファイルのアップロードだと思います。

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機能を使用できます。

https://github.com/danialfarid/ng-file-upload

ファイルと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
5

安全で速い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);
    });
}
4
Farsheed

私はこれが遅いエントリであることを知っていますが、私は簡単なアップロードディレクティブを作成しました。あなたはすぐに働くことができます!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ng-simple-upload Web APIを使った例を含むGithubについての詳細。

3
shammelburg

http://jsfiddle.net/vishalvasani/4hqVu/ chromeとIEでうまく動作します(background-imageでCSSを少し更新すると)。これはプログレスバーを更新するために使用されます。

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

しかしFireFoxでは、Angularの[percent]データはDOMで正常に更新されませんが、ファイルは正常にアップロードされています。

3
mayankcpdixit

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);
    }
3
Lakmi

私はすべてのスレッドを読みました、そして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);
2
Camille Sauvage

これは@ jquery-guruの答えに対する更新/コメントであるべきですが、私は十分な担当者を持っていないのでここに行くでしょう。それは今コードによって生成されるエラーを修正します。

https://jsfiddle.net/vzhrqotw/

変更は基本的に次のとおりです。

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

に:

app.controller('FileUploadCtrl', function($scope)
{

必要に応じて、より適切な場所に移動してください。

2
SKR

以下のコードを使って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;

        }
1
Karthik

上記の回答はブラウザに対応していません。互換性の問題がある場合はこれを試してください。

Fiddle

コードを見る

 <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);
    }
}
0
Kurkula

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>
0

簡単な言葉で

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
         };
0
ngCourse

作業例 簡単な指令を使用する( 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

0
Abdallah Okasha

ファイルをアップロードする

<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):/);

            }]);
0
D C

この作品

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);
  ?>
0

コードはファイルを挿入するのに役立ちます

<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);
?>
0
Hajis Hakkim
<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;
    }
0
rubyshine72