使用 AngularJS 上传文件

Posted

技术标签:

【中文标题】使用 AngularJS 上传文件【英文标题】:File Upload using AngularJS 【发布时间】:2013-09-05 10:21:53 【问题描述】:

这是我的 html 表单:

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

我想从本地机器上传一张图片,并想读取上传文件的内容。这一切我都想用 AngularJS 来完成。

当我尝试打印 $scope.file 的值时,它是未定义的。

【问题讨论】:

怎么样:***.com/questions/12979712/… 查看接受的答案stackoverrun.com/es/q/10211532#37040022。它使用FormDataangular-file-model。要了解如何使用file-model,请参阅embed.plnkr.co/plunk/0ZHCsR。它对我有用。 【参考方案1】:

这里的一些答案建议使用FormData(),但不幸的是,这是 Internet Explorer 9 及更低版本中不可用的浏览器对象。如果您需要支持那些较旧的浏览器,则需要一种备份策略,例如使用&lt;iframe&gt; 或 Flash。

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

https://github.com/leon/angular-upload - 使用 iframe 作为后备 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

其中一个应该适合您的项目,或者可以让您深入了解如何自己编写代码。

【讨论】:

另一种解决方案(文件上传的IaaS):github.com/uploadcare/angular-uploadcare EggHead 有一个很好的视频 - egghead.io/lessons/angularjs-file-uploads danialfarid/angular-file-upload 重命名为 ng-file-upload 3 岁的答案。 IE 9 现在在 2016 年已经死了。 我认为您应该更新您的答案以获得正确的解决方案,而不是指向链接。这就是堆栈溢出的方式。否则,只需将其作为评论。【参考方案2】:

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

移动浏览器

火狐(壁虎)32, 铬 3, 歌剧* 11.5, Safari 6.1

注意:readAsBinaryString() 方法已被弃用,而应使用readAsArrayBuffer()。

【讨论】:

FileReader 是标准 HTML5 文件 API w3.org/TR/FileAPI 中的一个类。它允许您从 html 输入元素中指定的文件中读取数据并在 onloadend 回调函数中对其进行处理。您不需要任何库来使用此 API,它已经在您的浏览器中(除非您使用非常旧的库)。希望这会有所帮助。 FileReader.readAsBinaryString 已于 2012 年 7 月 12 日被 W3C 的工作草案弃用。 您不应该使用 Angular 访问 DOM。是一种非常糟糕的做法。 @Siderex,不在控制器中,但从指令中做到这一点非常棒。事实上,这就是指令的用途。您可以在 Angular 文档 docs.angularjs.org/guide/directive 中阅读有关它的信息 @yagger 为什么你的链接引用 FileReaderSync 的 readAsArrayBuffer 方法(仅在 web 工作者中可用)而不是常规的异步 FileReader API 是否有特殊原因?【参考方案3】:

这是现代浏览器方式,没有 3rd 方库。适用于所有最新的浏览器。

 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/

【讨论】:

如何获取节点中的文件? 还有更多细节吗?您需要ng-submit 或表单操作吗?这本身没有任何作用 @Emaborsa hello 我添加了一个 jsfiddle 并制作了一个更完整的 php 代码示例。它在文件输入的值发生更改后提交图像,因此不需要 ng-submit。 完美最简单的解决方案,但是我花了很长时间才弄清楚如何让我的 WCF 服务来处理正在上传的数据。您获取数据流并通过 MultiParser 之类的东西传递它以实际读取文件数据是 至关重要的:***.com/a/23702692/391605 否则您将存储“------”的原始字节WebKitFormBoundary Content-Disposition:... etc.." 我需要将属性 'transformRequest: angular.identity' 添加到 $http 请求对象,如 Manoy Ojha 所示,再往下一点,否则 Content-Type 将无法正确设置,示例将不起作用.【参考方案4】:

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

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

在这个函数中调用

setFiles

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

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

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

【讨论】:

嗨,我正在寻找可以上传一个文件并显示在其下方的东西。但是在您的示例中,我无法做到这一点。不介意,但我是这个 angularjs 的新手,我打算学习以更简单但更强大的方式完成这个特定目标。 这很有帮助。谢谢! 不使用额外库/扩展的优秀示例。谢谢。 非常有帮助,只是一个注释..这使用了在 IE9 或更低版本中不起作用的 File API。 知道我是如何从结果中得到错误的吗?服务器可能会出错,我想显示该错误消息...【参考方案5】:

您可以使用flow.js实现漂亮的文件和文件夹上传。

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

在这里查看演示

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

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

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

【讨论】:

`flow.js' 很棒,但文档还很差。我需要操纵单个上传并添加预览并分开发送事件按钮,但我不知道该怎么做。【参考方案6】:

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

&lt;input type="file" onchange="angular.element(this).scope().fileSelected(this)" /&gt;

因此,当用户选择文件时,您无需点击“添加”或“上传”按钮即可获得对该文件的引用。

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

【讨论】:

这没有按预期工作。这是我的工作流程: 1. 刷新页面 2. 添加新文件。 ** 添加的第一个文件始终未定义。** 3. 添加另一个文件。从现在开始,每个上传的文件都是我之前添加的文件。所以对于我添加的第二个文件,这将上传我添加的第一个文件(实际上失败了) 最好的方法!【参考方案7】:

我尝试了@Anoyz(正确答案)给出的所有替代方案......最好的解决方案是https://github.com/danialfarid/angular-file-upload

一些特点:

进展 多文件 字段 旧版浏览器 (IE8-9)

这对我来说很好用。您只需要注意说明即可。

在服务器端,我使用 NodeJs、Express 4 和 Multer 中间件来管理多部分请求。

【讨论】:

如何显示图像?从后端,他们成功进入,但他们被保存为 nlzt9LJWRrAZEO3ZteZUOgGc 但没有 .png 格式。如何添加?【参考方案8】:

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

&lt;input type=file&gt; 元素默认情况下不适用于ng-model directive。它需要一个custom directive:

ng-model一起工作的select-ng-files指令的工作演示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 object 的POST 时,设置'Content-Type': undefined 很重要。然后XHR send method 会检测File object 并自动设置内容类型。

【讨论】:

【参考方案10】:

简单的指令

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

在指令中,我们确保创建了一个新范围,然后监听对文件输入元素所做的更改。当使用文件对象作为参数向所有祖先作用域(向上)发出事件时检测到更改。

在您的控制器中:

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

【讨论】:

【参考方案11】:

我认为这是 Angular 文件上传:

ng-文件上传

用于上传文件的轻量级 Angular JS 指令。

这是DEMO page.Features

支持上传进度、取消/中止上传、文件拖放 (html5)、目录拖放 (webkit)、CORS、PUT(html5)/POST 方法、文件类型和大小验证、显示预览选定的图像/音频/视频。 使用 Flash polyfill FileAPI 跨浏览器文件上传和 FileReader(HTML5 和非 HTML5)。允许在上传文件之前进行客户端验证/修改 使用 Upload.http() 将文件的内容类型直接上传到数据库服务 CouchDB、imgur 等。这将为 Angular http POST/PUT 请求启用进度事件。 单独的 shim 文件,FileAPI 文件按需加载非 HTML5 代码,这意味着如果您只需要 HTML5 支持,则无需额外加载/代码。 轻量级使用常规 $http 上传(对于非 HTML5 浏览器使用 shim),因此所有角度 $http 功能都可用

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

【讨论】:

【参考方案12】:

你的文件和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
// 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

【讨论】:

【参考方案13】:

您可以使用安全快速的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);
    );

【讨论】:

能否请您解释一下“contentChanged”的具体使用位置? 当文件输入发生变化时,触发此功能将开始上传过程。 既然没有&lt;input type="file" ng-change="contentChanged($event)"&gt;,怎么办?【参考方案14】:

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

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

但在 FireFox Angular 中,虽然文件上传成功,但 DOM 中的 [percent] 数据未成功更新。

【讨论】:

对于 FF,你可以监听load 事件,如果长度是可计算的,则触发进度事件以指示成功上传。 github.com/danialfarid/angular-file-upload 已经处理好了。 它在那里,但在给定的小提琴中,它也被检查和应用。 FF 仍然没有希望。 我认为如果你只是在 uploadComplete 中调用 uploadProgress 它应该适用于 FF 不,它没有,即使有,你能解释一下原因吗?我在我的帖子中给出了一个小提琴的链接。如果可能的话,您能否将其更新为在 FF 中工作并在此处评论解决方案的链接? 什么版本的火狐?【参考方案15】:

您可以考虑使用 IaaS 进行文件上传,例如 Uploadcare。它有一个 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/

【讨论】:

【参考方案16】:

我知道这是一个迟到的条目,但我创建了一个简单的上传指令。您可以立即开始工作!

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

ng-simple-upload Github 上的更多内容,其中包含使用 Web API 的示例。

【讨论】:

【参考方案17】:

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

【讨论】:

【参考方案18】:

这应该是对@jquery-guru 答案的更新/评论,但由于我没有足够的代表,它会放在这里。它修复了现在由代码生成的错误。

https://jsfiddle.net/vzhrqotw/

变化基本是:

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

收件人:

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

如果需要,请随意移动到更合适的位置。

【讨论】:

【参考方案19】:

我已阅读所有主题,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);

【讨论】:

【参考方案20】:

我可以通过以下代码使用 AngularJS 上传文件:

根据您的问题,需要为函数 ngUploadFileUpload 传递的参数的 file$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;

        

【讨论】:

【参考方案21】:

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

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

【讨论】:

【参考方案22】:

简单来说

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

在控制器中添加更多 - 下面的代码添加到函数中。当您单击使用 "hitting the 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
         ;

【讨论】:

【参考方案23】:
<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;
    

【讨论】:

【参考方案24】:

我们使用了 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>

【讨论】:

这来自TutorialsPoint,但至少你做了很好的纠正他们的例子,因为明显的错误甚至无法运行!【参考方案25】:

工作示例使用简单指令(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

最后,这是一个分叉的 repo:https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

【讨论】:

【参考方案26】:

代码将有助于插入文件

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

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

【讨论】:

【参考方案27】:

这行得通

文件.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>

文件上传.php

  <?php
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    move_uploaded_file($_FILES["file"]["tmp_name"],__DIR__. ' \\'.$image);
  ?>

【讨论】:

【参考方案28】:

上传文件

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

            ]);

【讨论】:

【参考方案29】:
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)  

【讨论】:

请格式化您的答案,它的格式不正确

以上是关于使用 AngularJS 上传文件的主要内容,如果未能解决你的问题,请参考以下文章

angularjs使用$http post上传文件的时候,怎样获取文件上传的进度

使用 AngularJS 上传文件

使用 AngularJS 和 SpringMVC 进行多部分文件上传

AngularJS:使用 $resource 上传文件(解决方案)

无法上传文件,php和angularjs

angularJs中上传图片/文件功能:ng-file-upload