这是我的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的值时。文件是未定义的。
当前回答
使用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()代替。
使用简单指令的示例(ng-file-model):
.directive("ngFileModel", [function () {
return {
$scope: {
ngFileModel: "="
},
link: function ($scope:any, element, attributes) {
element.bind("change", function (changeEvent:any) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
$scope.$apply(function () {
$scope.ngFileModel = {
lastModified: changeEvent.target.files[0].lastModified,
lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
name: changeEvent.target.files[0].name,
size: changeEvent.target.files[0].size,
type: changeEvent.target.files[0].type,
data: changeEvent.target.files[0]
};
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}])
并使用FormData在函数中上传文件。
var formData = new FormData();
formData.append("document", $scope.ngFileModel.data)
formData.append("user_id", $scope.userId)
所有学分都归 https://github.com/mistralworks/ng-file-model
我遇到了一个小问题,你可以在这里查看: https://github.com/mistralworks/ng-file-model/issues/7
最后,这里是一个分叉的回购:https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js
我知道这是一个较晚的条目,但我已经创建了一个简单的上传指令。你可以在任何时间工作!
<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />
在Github上上传更多使用Web API的示例。
<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
在angularJS控制器中
$scope.submit_import_csv = function(){
var formData = new FormData(document.getElementById("csv_file_form"));
console.log(formData);
$.ajax({
url: "import",
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(result, textStatus, jqXHR)
{
console.log(result);
}
});
return false;
}
http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中运行良好(如果你在background-image中稍微更新CSS)。 用于更新进度条:
scope.progress = Math.round(evt.loaded * 100 / evt.total)
但是在FireFox中,angular的[percent]数据没有在DOM中成功更新,尽管文件上传成功。