使用AngularJS上传文件

这是我的HTML表单:

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

我想从本地机器上传一个图像，并想读取上传文件的内容。所有这些我都想用AngularJS来做。

当我试图打印$scope的值时。文件是未定义的。

当前回答

以上接受的答案不兼容浏览器。如果有人有兼容性问题，试试这个。

小提琴

视图代码

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

2015-08-11 22:42:47

其他回答

简单地说

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

2017-05-05 10:21:33

http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中运行良好(如果你在background-image中稍微更新CSS)。用于更新进度条:

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

但是在FireFox中，angular的[percent]数据没有在DOM中成功更新，尽管文件上传成功。

2013-12-05 06:55:47

最简单的是使用HTML5 API，即FileReader

HTML非常简单:

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

在你的控制器中定义'add'方法:

$scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.onloadend = function(e) {
      var data = e.target.result;
      //send your binary data via $http or $resource or do anything else with it
    }

    r.readAsBinaryString(f);
}

浏览器兼容性

桌面浏览器

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

移动浏览器

Firefox(壁虎)32, Chrome 3, 歌剧* 11.5, Safari 6.1

注意:readAsBinaryString()方法已弃用，应该使用readAsArrayBuffer()代替。

2014-03-20 16:08:01

这是

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

2018-06-04 16:04:51

下面是文件上传的工作示例:

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

在这个函数中

setFiles

从视图更新控制器中的文件数组

你可以使用AngularJS检查jQuery文件上传

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

2013-09-02 10:53:09

使用AngularJS上传文件

推荐文章

最新文章

标签