AngularJS - 使用 FileReader API 上传和显示图像(多个文件) [英] AngularJS - upload and display image using FileReader API (multiple files)
本文介绍了AngularJS - 使用 FileReader API 上传和显示图像(多个文件)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我用下面的例子,效果很好,但是我想同时上传多张图片.
I use the following example, it works perfectly , but I'd like to upload multiple images simultaneously.
http://jsfiddle.net/kkhxsgLu/2/
<div ng-controller="MyCtrl">
<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{step}}" />
</div>
<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />
$scope.stepsModel = [];
$scope.imageUpload = function(element){
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
谢谢你的帮助,我是从 angularjs 开始的
Thank you kindly help me, I started with angularjs
推荐答案
解决方案:
http://jsfiddle.net/orion514/kkhxsgLu/136/
:)
<div ng-controller="MyCtrl">
<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{step}}" />
</div>
<input type='file' ng-model-instant
onchange="angular.element(this).scope().imageUpload(event)"
multiple />
$scope.stepsModel = [];
$scope.imageUpload = function(event){
var files = event.target.files; //FileList object
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(file);
}
}
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
这篇关于AngularJS - 使用 FileReader API 上传和显示图像(多个文件)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文