AngularJS Kullanarak Dosya Yükleme

İşte HTML formum:

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

Yerel makineden bir resim yüklemek istiyorum ve yüklenen dosyanın içeriğini okumak istiyorum. Bütün bunları AngularJS kullanarak yapmak istiyorum.

Yazdırmaya çalıştığımda değeri $scope.filetanımsız olarak geliyor.

Buradaki bazı cevaplar kullanmayı önermektedir FormData(), ancak maalesef bu Internet Explorer 9 ve altında mevcut olmayan bir tarayıcı nesnesidir. Bu eski tarayıcıları desteklemeniz gerekiyorsa, kullanma <iframe>veya Flash gibi bir yedekleme stratejisine ihtiyacınız olacaktır .

Dosya yüklemeyi gerçekleştirmek için zaten birçok Angular.js modülü var. Bu ikisinin eski tarayıcılar için açık bir desteği var:

• https://github.com/leon/angular-upload - iframe'leri yedek olarak kullanır
• https://github.com/danialfarid/ng-file-upload - Yedek olarak FileAPI / Flash kullanır

Ve diğer bazı seçenekler:

• https://github.com/nervgh/angular-file-upload/
• https://github.com/uor/angular-file
• https://github.com/twilson63/ngUpload
• https://github.com/uploadcare/angular-uploadcare

Bunlardan biri projenize uymalı veya kendiniz nasıl kodlayacağınız konusunda size fikir verebilir.

En kolayı HTML5 API'sini, yani FileReader

HTML oldukça basittir:

<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>

Denetleyicinizde 'add' yöntemini tanımlayın:

$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);
}

Tarayıcı Uyumluluğu

Masaüstü Tarayıcılar

Edge 12, Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Opera * 12.02, Safari 6.0.2

Mobil Tarayıcılar

Firefox (Gecko) 32, Chrome 3, Opera * 11.5, Safari 6.1

Not: readAsBinaryString () yöntemi kullanımdan kaldırılmıştır ve bunun yerine readAsArrayBuffer () kullanılmalıdır.

Bu, üçüncü taraf kütüphaneleri olmadan modern tarayıcı yoludur. En son tarayıcılarda çalışır.

 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 keman (sadece ön uç) https://jsfiddle.net/vince123/8d18tsey/31/

Aşağıda dosya yüklemesinin çalışma örneği verilmiştir:

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

Bu bir fonksiyonda

setFiles

Denetleyicideki dosya dizisini güncelleyecek Görünümden

veya

AngularJS kullanarak jQuery Dosya Yüklemesini kontrol edebilirsiniz

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

Flow.js'yi kullanarak güzel dosya ve klasör yükleme işlemi gerçekleştirebilirsiniz .

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

Buradan bir demoya göz atın

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

IE7, IE8, IE9'u desteklemediğinden, sonunda bir uyumluluk katmanı kullanmanız gerekecek

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

onchangeGirdi dosyası öğesini işlevinize iletmek için olayı kullanın .

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

Kullanıcı bir dosya seçtiğinde, kullanıcının bir "Ekle" veya "Yükle" düğmesini tıklaması gerekmeden bir referansınız olur.

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

@Anoyz'in (Doğru cevap) verdiği tüm alternatifleri denedim ... ve en iyi çözüm https://github.com/danialfarid/angular-file-upload

Bazı özellikler:

• İlerleme
• Multifiles
• Alanlar
• Eski tarayıcılar (IE8-9)

Benim için iyi çalışıyor. Sadece talimatlara dikkat etmelisiniz.

Sunucu tarafında, çok parçalı isteği yönetmek için NodeJs, Express 4 ve Multer ara katman yazılımlarını kullanıyorum.

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>

Kodlar

  <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>Eleman ile varsayılan çalışmalarından değil ng model direktifi . Bu bir ihtiyacı , özel yönergesi :

Çalışan select-ng-filesDirektif Çalışma Demo 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>

$http.postbir Dosya Listesinden

$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);
};

Bir File nesnesiyle bir POST gönderirken , ayarlamak önemlidir 'Content-Type': undefined. XHR gönderme yöntemi sonra algılar Dosya nesnesini ve otomatik içerik türünü ayarlayın.

Direktif ile kolay

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] });
            }                                       
        });
    }
};

Yönergede yeni bir kapsamın oluşturulmasını sağlıyoruz ve daha sonra dosya giriş öğesinde yapılan değişiklikleri dinliyoruz. Değişiklik algılandığında, dosya nesnesi ile parametre olarak tüm ata kapsamlarına (yukarı) bir olay gönderir.

Kumandanızda:

$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);
    });
});

Sonra ajax çağrınızda:

data: { model: $scope.model, files: $scope.files }

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/

Bu açısal dosya yükleme olduğunu düşünüyorum:

ng-file-yükleme

Dosyaları yüklemek için Hafif Açısal JS yönergesi.

İşte DEMO sayfası.

• Yükleme ilerleme durumunu, devam ederken yüklemeyi iptal etme / iptal etme, Dosya sürükle ve bırak (html5), Dizin sürükle ve bırak (webkit), CORS, PUT (html5) / POST yöntemleri, dosya türünün ve boyutunun doğrulanması, seçilen görüntülerin önizlemesini göster / ses / video.
• Flash çoklu dolgu FileAPI ile çapraz tarayıcı dosya yükleme ve FileReader (HTML5 ve HTML5 olmayan). Dosyayı yüklemeden önce istemci tarafında doğrulama / değiştirmeye izin verir
• Upload.http () kullanarak dosyanın içerik türüyle CobDB, imgur vb. Db servislerine doğrudan yükleme. Bu, açısal http POST / PUT istekleri için progress olayını etkinleştirir.
• Ayrı şim dosyası, FileAPI dosyaları HTML5 olmayan kod için talep üzerine yüklenir, bu da sadece HTML5 desteğine ihtiyacınız varsa ekstra yük / kod anlamına gelmez.
• Yüklemek için normal $ http kullanarak hafiftir (HTML5 olmayan tarayıcılar için dolgu ile), böylece tüm açısal $ http özellikleri kullanılabilir

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

Dosyanız ve json verileriniz aynı anda yükleniyor.

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

FormDataGüvenli ve hızlı bir nesne kullanabilirsiniz :

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

http://jsfiddle.net/vishalvasani/4hqVu/ , krom ve IE'de iyi çalışır (arka plan resminde CSS'yi biraz güncellerseniz). Bu, ilerleme çubuğunu güncellemek için kullanılır:

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

ancak FireFox angular'ın [yüzde] verileri DOM'da başarıyla güncellenmese de, dosyalar başarıyla yükleniyor.

Uploadcare gibi dosya yüklemek için IaaS'yi düşünebilirsiniz . Bunun için bir Açısal paket var: https://github.com/uploadcare/angular-uploadcare

Teknik olarak, yükleme için farklı seçenekler ve widget içindeki yüklenen görüntüler için manipülasyonlar sağlayan bir direktif olarak uygulanır:

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

Oynamak için daha fazla yapılandırma seçeneği: https://uploadcare.com/widget/configure/

Bunun geç bir giriş olduğunu biliyorum ama basit bir yükleme yönergesi oluşturdum. Hangi zaman içinde çalışma alabilirsiniz!

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

ng-simple- Web API kullanan bir örnekle Github'a daha fazla yükleyin .

HTML

<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />

denetleyicinize 'profileimage ()' yöntemini ekle

    $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);
    }

Bu @ jquery-guru cevap için bir güncelleme / yorum olmalı ama yeterli temsilcisi yok gibi buraya gidecek. Şimdi kod tarafından oluşturulan hataları giderir.

https://jsfiddle.net/vzhrqotw/

Değişiklik temel olarak:

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

Kime:

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

İsterseniz daha uygun bir yere taşınmaktan çekinmeyin.

Tüm iş parçacığını okudum ve HTML5 API çözümü en iyi görünüyordu. Ama ikili dosyalarımı değiştirerek, araştırdığım bir şekilde bozuyor. Benim için mükemmel çalışan çözüm:

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

Sunucu tarafı (PHP):

$file_content = $_POST['file'];
$file_content = substr($file_content,
    strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);

Aşağıdaki kodu kullanarak AngularJS kullanarak dosya yükleyebilirim:

fileFonksiyon için iletilmesi gereken argüman için ngUploadFileUploadolan $scope.filesorunuza göre.

Burada kilit nokta kullanmaktır transformRequest: []. Bu, $ http dosyasının içeriğiyle uğraşmasını önler.

       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;

        }

Kabul edilen yukarıdaki yanıt tarayıcı uyumlu değil. Bazılarının uyum sorunu varsa bunu deneyin.

Vaktini boşa harcamak

Kodu Görüntüle

 <div ng-controller="MyCtrl">
      <input type="file" id="file" name="file"/>
      <br>
      <button ng-click="add()">Add</button>
      <p>{{data}}</p>
    </div>

Denetleyici kodu

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

basit kelimelerle

Html'de - yalnızca aşağıdaki kodu ekleyin

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

denetleyicide - Bu işlev, "dosya yükle düğmesini" tıkladığınızda çağrılır. dosyayı yükleyecektir. Konsol yapabilirsiniz.

$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
  $scope.files = element.files;         
});
}

denetleyicilere daha fazlasını ekleyin - kodun altına işleve ekleyin. Bu işlev, "api'ye (POST) vurmak" için kullanılan düğmeye tıkladığınızda çağrılır . arka uca dosya (yüklenen) ve form verileri gönderir.

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()
             });
        }

bu durumda .. ben form veri olarak kodun altına ekledi

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>

Açısal JS denetleyicisinde

$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 ve AngularJS kullandık. Aşağıdaki örnek, AngularJS kullanarak dosyanın nasıl yükleneceği hakkında bilgi vermektedir.

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

Basit Yönerge ( ng-file-model ) kullanarak Çalışma Örneği :

.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]);
          });
      }
  }
}])

ve FormDataişlevinize dosya yüklemek için kullanın .

var formData = new FormData();
 formData.append("document", $scope.ngFileModel.data)
 formData.append("user_id", $scope.userId)

tüm krediler https://github.com/mistralworks/ng-file-model için geçerlidir

Burada kontrol edebileceğiniz küçük bir probla karşılaştım: https://github.com/mistralworks/ng-file-model/issues/7

Son olarak, çatallı bir repo: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

Kod dosya eklemek için yardımcı olacaktır

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

bu çalışıyor

dosya.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);
  ?>

DOSYALARI YÜKLE

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

        };

DOSYALARI İNDİR:

          <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) { }