使用AngularJS的上传表单与其他表单字段。

26 浏览
0 Comments

使用AngularJS的上传表单与其他表单字段。

这是我的HTML表单：\n

\n我想从本地机器上传一张图片，并想要读取所上传文件的内容。我想要使用AngularJS来完成所有这些操作。当我尝试打印$scope.file的值时，结果显示为undefined。

0

3 答案

0 Comments

问题出现的原因：

该问题出现的原因是在AngularJS中，使用一个自定义指令来实现上传文件的功能。在该指令中，绑定了一个change事件，当文件选择框的值发生变化时，会向服务器发送一个POST请求，将文件数据上传到服务器。

解决方法：

要解决这个问题，可以按照以下步骤进行操作：

1. 创建一个自定义指令，命名为'myDirective'，在该指令中使用$http服务发送POST请求。该指令的作用是在文件选择框的值发生变化时，将文件数据上传到服务器。指令的代码如下：

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

2. 创建一个工厂函数，命名为'httpPostFactory'，用于发送POST请求。该函数接收三个参数：文件路径、数据和回调函数。函数的代码如下：

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

3. 在HTML中使用该自定义指令来实现文件上传功能。代码如下：

4. 在服务器端使用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);
}

通过以上步骤，就可以实现在AngularJS中使用自定义指令来上传文件的功能。

0
0 Comments

问题的原因是需要在网页上使用JavaScript上传并显示Excel表格的内容，而不是将其上传到服务器然后从服务器获取内容。如果使用readAsDataUrl()方法，则会得到其Base64编码形式，但如何读取并获取Excel数据呢？解决方法是使用HTML5的FileReader API，通过readAsBinaryString()方法读取文件的二进制数据，并在onloadend回调函数中处理数据。以下是解决方法的代码示例：

$scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();
    r.onloadend = function(e) {
      var data = e.target.result;
      // 使用$http或$resource发送二进制数据，或者进行其他处理
    }
    r.readAsBinaryString(f);
}

需要注意的是，readAsBinaryString()方法已被废弃，应该使用readAsArrayBuffer()方法代替。FileReader是HTML5标准的File API中的一个类，它允许您从html input元素中指定的文件中读取数据，并在onloadend回调函数中进行处理。不需要任何库来使用这个API，因为它已经存在于浏览器中（除非使用非常旧的浏览器）。希望这能帮到你。

另外，需要注意的是不应该在控制器中访问DOM，这是一个非常糟糕的做法。应该使用指令来处理DOM操作。关于指令的更多信息可以在Angular文档中找到。

总结一下，问题的原因是需要在网页上上传并显示Excel表格的内容，而不是将其上传到服务器然后从服务器获取内容。解决方法是使用HTML5的FileReader API中的readAsBinaryString()方法读取文件的二进制数据，并在onloadend回调函数中处理数据。同时需要注意不应该在控制器中访问DOM，而是使用指令来处理DOM操作。

0
0 Comments

问题：如何在AngularJS中实现带有其他表单字段的上传表单？

原因：在Internet Explorer 9及以下版本中，浏览器对象FormData()不可用。因此，如果需要支持这些较旧的浏览器，就需要备用策略，例如使用<iframe>或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。这些模块中的一个应该适用于您的项目，或者可以为您编写自己的代码提供一些见解。

其他解决方案：有一个名为github.com/uploadcare/angular-uploadcare的文件上传的IaaS解决方案。

参考资源：

- EggHead有一个关于此问题的很好的视频教程：egghead.io/lessons/angularjs-file-uploads。

- 有一个解决方案是在github.com/vikibaarathi/Angular-PHP-Imgur-Upload上共享的。

注意：IE 9在2016年已经过时，因此可以考虑更新答案以提供适当的解决方案，或者将其作为评论提供。

0