使用AngularJS上传文件

这是我的HTML表单:

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

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

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

当前回答

您可以考虑使用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/

2014-10-10 07:37:31

其他回答

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

https://jsfiddle.net/vzhrqotw/

变化主要是:

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

To:

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

如果需要，请随意搬到更合适的地方。

2015-03-27 01:05:50

我想这是angular文件的上传:

ng-file-upload

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

这里是演示页面。特性

Supports upload progress, cancel/abort upload while in progress, File drag and drop (html5), Directory drag and drop (webkit), CORS, PUT(html5)/POST methods, validation of file type and size, show preview of selected images/audio/videos. Cross browser file upload and FileReader (HTML5 and non-HTML5) with Flash polyfill FileAPI. Allows client side validation/modification before uploading the file Direct upload to db services CouchDB, imgur, etc... with file's content type using Upload.http(). This enables progress event for angular http POST/PUT requests. Seperate shim file, FileAPI files are loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. Lightweight using regular $http to upload (with shim for non-HTML5 browsers) so all angular $http features are available

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

2015-05-14 07:30:25

<input type=file>元素默认不使用ng-model指令。它需要一个自定义指令:

使用ng-model1的select-ng-files指令的工作演示

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。从FileList中post

$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对象的POST时，重要的是设置'Content-Type': undefined。然后XHR发送方法将检测File对象并自动设置内容类型。

2017-08-09 21:14:07

我能够通过使用下面的代码使用AngularJS上传文件:

函数ngUploadFileUpload需要传递的参数的文件是$scope。按你的问题归档。

这里的关键点是使用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;

        }

2018-01-10 13:55:06

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

使用AngularJS上传文件

推荐文章

最新文章

标签