Tải lên tệp bằng AngularJS

Đây là mẫu HTML của tôi:

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

Tôi muốn tải lên một hình ảnh từ máy cục bộ và muốn đọc nội dung của tệp được tải lên. Tất cả điều này tôi muốn làm bằng cách sử dụng AngularJS.

Khi tôi cố gắng in giá trị của $scope.filenó là không xác định.

Một số câu trả lời ở đây đề xuất sử dụng FormData(), nhưng thật không may, đó là một đối tượng trình duyệt không có sẵn trong Internet Explorer 9 trở xuống. Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn sẽ cần một chiến lược sao lưu như sử dụng <iframe>hoặc Flash.

Đã có nhiều mô-đun Angular.js để thực hiện tải lên tệp. Hai cái này có hỗ trợ rõ ràng cho các trình duyệt cũ hơn:

• https://github.com/leon/angular-upload - sử dụng iframe làm dự phòng
• https://github.com/danialfarid/ng-file-upload - sử dụng FileAPI / Flash làm dự phòng

Và một số tùy chọn khác:

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

Một trong những điều này sẽ phù hợp với dự án của bạn, hoặc có thể cung cấp cho bạn một cái nhìn sâu sắc về cách tự viết mã cho nó.

Đơn giản nhất là sử dụng API HTML5, cụ thể là FileReader

HTML khá đơn giản:

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

Trong bộ điều khiển của bạn xác định phương thức 'thêm':

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

tính tương thích của trình duyệt web

Trình duyệt máy tính để bàn

Cạnh 12, Firefox (Tắc kè) 3.6 (1.9.2), Chrome 7, Opera * 12.02, Safari 6.0.2

Trình duyệt di động

Firefox (Tắc kè) 32, Chrome 3, Opera * 11,5, Safari 6.1

Lưu ý: phương thức readAsBinaryString () không được dùng nữa và thay vào đó nên sử dụng readAsArrayBuffer () .

Đây là cách trình duyệt hiện đại, không có thư viện của bên thứ 3. Hoạt động trên tất cả các trình duyệt mới nhất.

 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 fiddle (chỉ mặt trước) https://jsfiddle.net/vince123/8d18tsey/31/

Dưới đây là ví dụ hoạt động của tải lên tập tin:

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

Trong hàm này được gọi là

setFiles

Từ View sẽ cập nhật mảng tập tin trong bộ điều khiển

hoặc là

Bạn có thể kiểm tra Tải lên tệp jQuery bằng AngularJS

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

Bạn có thể đạt tập thoải mái và thư mục upload sử dụng flow.js .

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

Kiểm tra một bản demo ở đây

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

Nó không hỗ trợ IE7, IE8, IE9, vì vậy cuối cùng bạn sẽ phải sử dụng lớp tương thích

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

Sử dụng onchange sự kiện để chuyển phần tử tệp đầu vào cho hàm của bạn.

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

Vì vậy, khi người dùng chọn một tệp, bạn có một tham chiếu đến nó mà không cần người dùng phải nhấp vào nút "Thêm" hoặc "Tải lên".

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

Tôi đã thử tất cả các lựa chọn thay thế mà @Anoyz (Câu trả lời đúng) đưa ra ... và giải pháp tốt nhất là https://github.com/danialfarid/angular-file-upload

Một số tính năng:

• Phát triển
• Đa điểm
• Lĩnh vực
• Các trình duyệt cũ (IE8-9)

Nó hoạt động tốt với tôi. Bạn chỉ cần chú ý hướng dẫn.

Ở phía máy chủ, tôi sử dụng phần mềm trung gian NodeJs, Express 4 và Multer để quản lý yêu cầu nhiều phần.

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>

Chữ viết

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

Phần <input type=file>tử không mặc định hoạt động với chỉ thị ng-model . Nó cần một chỉ thị tùy chỉnh :

Bản demo làm việc của select-ng-filesChỉ thị hoạt động với 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.posttừ một danh sách tập tin

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

Khi gửi POST với đối tượng File , điều quan trọng là phải đặt 'Content-Type': undefined. Các phương pháp XHR gửi sau đó sẽ phát hiện các đối tượng tập tin và tự động thiết lập các loại nội dung.

Dễ dàng với một chỉ thị

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

Trong chỉ thị, chúng tôi đảm bảo một phạm vi mới được tạo và sau đó lắng nghe những thay đổi được thực hiện đối với phần tử nhập tệp. Khi các thay đổi được phát hiện cùng với việc phát ra một sự kiện cho tất cả các phạm vi tổ tiên (hướng lên) với đối tượng tệp làm tham số.

Trong bộ điều khiển của bạn:

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

Sau đó, trong cuộc gọi ajax của bạn:

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

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

Tôi nghĩ rằng đây là tải lên tập tin góc:

ng-file-upload

Chỉ thị nhẹ Angular JS để tải lên các tập tin.

Đây là trang DEMO. Tính năng

• Hỗ trợ tiến trình tải lên, hủy / hủy tải lên trong khi đang tiến hành, Kéo và thả tệp (html5), kéo và thả thư mục (webkit), CORS, PUT (html5) / phương thức POST, xác thực loại và kích thước tệp, hiển thị xem trước các hình ảnh được chọn / âm thanh / video.
• Tải lên tệp trình duyệt chéo và FileReader (HTML5 và không phải HTML5) với Flash polyfill FileAPI. Cho phép xác thực / sửa đổi phía máy khách trước khi tải lên tệp
• Tải trực tiếp lên các dịch vụ db CouchDB, imgur, v.v ... với loại nội dung của tệp bằng Upload.http (). Điều này cho phép sự kiện tiến trình cho các yêu cầu http / PUT góc cạnh.
• Tập tin shim tách rời, tập tin FileAPI được tải theo yêu cầu cho mã không phải HTML5 có nghĩa là không tải thêm / mã nếu bạn chỉ cần hỗ trợ HTML5.
• Nhẹ sử dụng $ http thông thường để tải lên (với shim cho các trình duyệt không phải HTML5), vì vậy tất cả các tính năng $ http góc cạnh đều khả dụng

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

Tập tin của bạn và dữ liệu json tải lên cùng một lúc.

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

Bạn có thể sử dụng một FormDatađối tượng an toàn và nhanh chóng:

// 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/ hoạt động tốt trong chrome và IE (nếu bạn cập nhật CSS một chút trong ảnh nền). Điều này được sử dụng để cập nhật thanh tiến trình:

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

nhưng trong dữ liệu [phần trăm] của FireFox không được cập nhật thành công trong DOM, mặc dù các tệp đang tải lên thành công.

Bạn có thể xem xét IaaS để tải lên tệp, chẳng hạn như Uploadcare . Có một gói Angular cho nó: https://github.com/uploadcare/angular-uploadcare

Về mặt kỹ thuật, nó được triển khai như một chỉ thị, cung cấp các tùy chọn khác nhau để tải lên và thao tác cho hình ảnh được tải lên trong tiện ích:

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

Các tùy chọn cấu hình khác để chơi với: https://uploadcare.com/widget/configure/

Tôi biết đây là một mục muộn nhưng tôi đã tạo một chỉ thị tải lên đơn giản. Mà bạn có thể làm việc trong thời gian không!

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

ng-đơn giản - tải lên nhiều hơn trên Github với một ví dụ sử dụng API Web.

HTML

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

thêm phương thức 'profileimage ()' vào bộ điều khiển của bạn

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

Đây phải là một bản cập nhật / nhận xét cho câu trả lời của @ jquery-guru nhưng vì tôi không có đủ đại diện nên nó sẽ xuất hiện ở đây. Nó sửa các lỗi hiện được tạo bởi mã.

https://jsfiddle.net/vzhrqotw/

Thay đổi về cơ bản là:

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

Đến:

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

Hãy di chuyển đến một vị trí thích hợp hơn nếu muốn.

Tôi đã đọc tất cả các luồng và giải pháp API HTML5 trông tốt nhất. Nhưng nó thay đổi các tệp nhị phân của tôi, làm hỏng chúng theo cách mà tôi chưa điều tra. Giải pháp hiệu quả với tôi là:

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

Phía máy chủ (PHP):

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

Tôi có thể tải lên các tệp bằng AngularJS bằng cách sử dụng mã dưới đây:

Đối filesố cần được truyền cho hàm ngUploadFileUploadlà$scope.file theo câu hỏi của bạn.

Điểm quan trọng ở đây là sử dụng transformRequest: []. Điều này sẽ ngăn $ http bị rối với nội dung của tệp.

       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;

        }

Trên câu trả lời được chấp nhận là không tương thích trình duyệt. Nếu ai đó có vấn đề tương thích hãy thử điều này.

Vĩ cầm

Xem mã

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

Mã điều khiển

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

nói một cách đơn giản

trong Html - chỉ thêm mã bên dưới

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

trong bộ điều khiển - Chức năng này được gọi khi bạn nhấp vào "nút tải lên tệp" . nó sẽ tải tập tin lên bạn có thể điều khiển nó

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

thêm nhiều hơn trong bộ điều khiển - bên dưới mã thêm vào chức năng. Chức năng này được gọi khi bạn nhấp vào nút được sử dụng "nhấn api (POST)" . nó sẽ gửi tệp (đã tải lên) và dữ liệu biểu mẫu đến phần phụ trợ.

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

trong trường hợp này .. tôi đã thêm mã dưới đây dưới dạng dữ liệu

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>

Trong bộ điều khiển 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;
    }

Chúng tôi đã sử dụng HTML, CSS và AngularJS. Ví dụ sau đây cho thấy cách tải tệp lên bằng 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>

Ví dụ làm việc bằng cách sử dụng Chỉ thị đơn giản ( 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]);
          });
      }
  }
}])

và sử dụng FormDatađể tải lên tập tin trong chức năng của bạn.

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

tất cả các khoản tín dụng dành cho https://github.com/mistralworks/ng-file-model

Tôi đã phải đối mặt với một thử thách nhỏ mà bạn có thể kiểm tra nó ở đây: https://github.com/mistralworks/ng-file-model/issues/7

Cuối cùng, đây là một repo rẽ nhánh: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

Mã sẽ giúp chèn tập tin

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

những công việc này

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>

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

TẢI LÊN

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

        };

TẢI TẬP TIN:

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