使用AngularJS上传文件

这是我的HTML表单:

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

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

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

当前回答

这是

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

其他回答

最简单的是使用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

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

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

在这个函数中

setFiles

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

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

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

2013-09-02 10:53:09

你可以使用flow.js实现良好的文件和文件夹上传。

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

点击这里查看演示

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

它不支持IE7, IE8, IE9，所以你最终必须使用兼容层

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

2014-05-24 12:15:02

这里的一些答案建议使用FormData()，但不幸的是，这是一个浏览器对象，在Internet Explorer 9及以下版本中不可用。如果您需要支持这些旧浏览器，您将需要一个备份策略，例如使用<iframe>或Flash。

已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:

https://github.com/leon/angular-upload -使用iframes作为备份 https://github.com/danialfarid/ng-file-upload -使用FileAPI/Flash作为备份

还有一些其他的选择:

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

其中一个应该适合你的项目，或者可能会给你一些关于如何自己编写代码的见解。

2013-12-10 21:50:00

使用onchange事件将输入文件元素传递给函数。

<输入类型=“文件”/>

因此，当用户选择一个文件时，您就有了对该文件的引用，而不需要用户单击“添加”或“上传”按钮。

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

2016-07-14 20:18:41

使用AngularJS上传文件

推荐文章

最新文章

标签