这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地机器上传一个图像,并想读取上传文件的内容。所有这些我都想用AngularJS来做。
当我试图打印$scope的值时。文件是未定义的。
这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地机器上传一个图像,并想读取上传文件的内容。所有这些我都想用AngularJS来做。
当我试图打印$scope的值时。文件是未定义的。
当前回答
上传文件
<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />
$scope.uploadResume = function () {
var f = document.getElementById('resume').files[0];
$scope.selectedResumeName = f.name;
$scope.selectedResumeType = f.type;
r = new FileReader();
r.onloadend = function (e) {
$scope.data = e.target.result;
}
r.readAsDataURL(f);
};
下载文件:
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
其他回答
下面是文件上传的工作示例:
http://jsfiddle.net/vishalvasani/4hqVu/
在这个函数中
setFiles
从视图更新控制器中的文件数组
or
你可以使用AngularJS检查jQuery文件上传
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中运行良好(如果你在background-image中稍微更新CSS)。 用于更新进度条:
scope.progress = Math.round(evt.loaded * 100 / evt.total)
但是在FireFox中,angular的[percent]数据没有在DOM中成功更新,尽管文件上传成功。
这里的一些答案建议使用FormData(),但不幸的是,这是一个浏览器对象,在Internet Explorer 9及以下版本中不可用。如果您需要支持这些旧浏览器,您将需要一个备份策略,例如使用<iframe>或Flash。
已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:
https://github.com/leon/angular-upload -使用iframes作为备份 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
其中一个应该适合你的项目,或者可能会给你一些关于如何自己编写代码的见解。
使用onchange事件将输入文件元素传递给函数。
<输入类型=“文件”/>
因此,当用户选择一个文件时,您就有了对该文件的引用,而不需要用户单击“添加”或“上传”按钮。
$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};
最简单的是使用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()代替。