使用Angular JS进行文件选择

19 浏览
0 Comments

使用Angular JS进行文件选择

我想使用AngularJS获取文件：

HTML：

javascript：

angular.module('plunker', ['ui.bootstrap']);
function TopMenuCtrl($scope) {
    $scope.pickimg = function() {
        alert('a');
    };
}

如何将输入文件的onchange操作绑定到AngularJS的pickimg函数上？

上传后如何操作已上传的文件？

0

3 答案

0 Comments

问题的原因是Teemu的解决方案在IE9中不能工作。为了解决这个问题，我使用了一个简单的Angular指令和Flash polyfill来处理不支持HTML5 FormData的浏览器，你还可以监听上传进度事件。

解决方法是使用一个名为ng-file-upload的库，它是一个Angular的插件。你可以在这个链接中找到它的GitHub页面：https://github.com/danialfarid/ng-file-upload。你还可以在这个链接中找到它的演示页面：http://angular-file-upload.appspot.com/。

在你的HTML文件中，你需要引入Angular和ng-file-upload的脚本文件。然后，在你的控制器中，你可以使用Upload.upload方法来上传文件。你可以设置上传的URL、附加数据和文件。你还可以指定成功、错误和进度事件的回调函数。

这是一个更综合的解决方案，可以解决IE9中Teemu解决方案无法工作的问题。通过使用ng-file-upload库，我们可以处理不支持HTML5 FormData的浏览器，并监听上传进度事件。希望这个解决方案对你有帮助！

0
0 Comments

在上述代码中，问题的原因是$scope.$apply()方法没有在reader.onload函数内部调用。这导致在读取文件并将其转换为DataURL之后，无法更新$scope变量。

要解决这个问题，只需要将$scope.$apply()方法移到reader.onload函数内部即可。这样，在文件读取完成并成功转换为DataURL后，就会立即更新$scope变量。

以下是修改后的代码：

$scope.file_changed = function(element) {
    var photofile = element.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        $scope.$apply(function() {
            $scope.prev_img = e.target.result;
        });
    };
    reader.readAsDataURL(photofile);
};

为了在视图中预览图像，可以通过添加以下代码实现：。

修改后的代码是解决问题的关键，之前的代码无法更新模型，这让我感到困惑。

0
0 Comments

AngularJS目前尚不支持对input[type=file]元素使用ng-change指令，因此我们需要自己实现onchange事件。首先，在HTML中定义onchange的JavaScript代码如下：

<input ng-model="photo"
       onchange="angular.element(this).scope().file_changed(this)"
       type="file" accept="image/*" />

然后，在Angular控制器中定义file_changed函数：

$scope.file_changed = function(element) {
     $scope.$apply(function(scope) {
         var photofile = element.files[0];
         var reader = new FileReader();
         reader.onload = function(e) {
            // 处理onload事件
         };
         reader.readAsDataURL(photofile);
     });
};

我已经成功使用了这种技术。虽然有些丑陋，但这是目前最好的解决方法。

“在获得文件引用之后，实例化一个FileReader对象，将其内容读入内存。当加载完成时，会触发reader的onload事件，并且可以使用其result属性访问文件数据。” 来自于html5rocks.com/en/tutorials/file/dndfiles

-kurppa的方法非常好用。只有一个问题，我如何将迭代的ngRepeat元素添加到.file_changed(this)中，例如.file_changed(this,obj)，其中obj是ngRepeat="obj in objects"。当我尝试这样做时，它显示obj未定义。

你需要从作用域中读取它。onchange是浏览器事件，发生在Angular作用域之外。与file_changed无法直接访问的方式相同。

$scope.$apply(function(scope) { 部分应该在reader.onload内部。否则，模型不会更新。

请注意，如果你禁用了debugInfo（如在生产环境中推荐的），此方法将无效。

请注意，你可以在指令控制器中获取$element（或在链接函数中获取元素引用），因此你可以这样做：$element[0].children[0].onchange = () => {}在你的控制器设置中。这样就不需要在调试模式下运行，因为你可以在仍然可以访问你的控制器作用域的同时获取元素。

有没有可能提供一些代码呢？一个完整的示例，可以是一个Plunk吗？

这个答案使用了AngularJS框架的调试选项。在生产中不应使用，因为会影响性能。还有更好的解决方法。

0