使用AngularJS进行文件上传

9 浏览
0 Comments

使用AngularJS进行文件上传

这是我的HTML表单:

 

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

当我尝试打印$scope.file变量的值时，它显示为未定义。

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

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

HTML非常简单：

在您的控制器中定义"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(Gecko) 32，Chrome 3，Opera* 11.5，Safari 6.1

注意：readAsBinaryString() 方法已被弃用，应使用readAsArrayBuffer()代替。

0
0 Comments

这里的一些答案建议使用FormData()，但不幸的是这是一个在Internet Explorer 9及以下版本中不可用的浏览器对象。如果你需要支持那些老的浏览器，你将需要一个备用策略，比如使用