使用AngularJS上传文件

Question

这是我的超文本标记语言形式：

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

我想从本地机器上传图像，并希望读取上传文件的内容。所有这些我都想使用AngularJS来完成。

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

Answer 1

这是一种现代浏览器方式，没有第三方库。适用于所有最新的浏览器。

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

超文本标记语言：

<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（仅前端）https://jsfiddle.net/vince123/8d18tsey/31/

Answer 2

最简单的方法是使用HTML5API，即FileReader

HTML非常简单：

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

在控制器中定义“添加”方法：

$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）、Chrome7、Opera*12.02、Safari 6.0。2.

移动浏览器

Firefox（Gecko）32、Chrome3、Opera*11.5、Safari 6.1

注意：readAsBinaryString（）方法不建议使用，应改为readAsArrayBuffer（）。

Answer 3

这里的一些答案建议使用FormData（），但不幸的是，这是Internet Explorer 9及以下版本中不可用的浏览器对象。如果您需要支持那些较旧的浏览器，则需要使用备份策略，例如使用

已经有很多了。执行文件上传的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

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