问题描述
Id喜欢实现一个UI,其中用户选择一个图像,该图像立即显示回给他们查看.用户将必须单击提交"以将图像上传/保存到他们的个人资料.
Id like to implement a UI where the user selects an image and that image is instantly displayed back to them for review. The user would have to click "submit" to upload/save the image to their profile.
立即显示回用户部分"出现问题.
I am having issues with the "instantly display back to the user part".
我正在使用带有以下标记&的有角FormData;控制器:
I am using angular FormData with the following markup & controller:
标记
<input id="chooseFile" type="file" file-model="picFile" />
<img src="{{uploadedImage}}" /> <!-- this populates with filename but what is the path?? -->
CONTROLLER
angular.element('#chooseFile').change(function(){
var file = $scope.picFile; // this comes up "undefined" since file is still uploading when this is fired
$scope.uploadedImage = file.name;
});
上述代码(注释中有描述)存在两个主要问题:
1)在控制器中,file
出现undefined
的原因很明显,因为即使最小的文件也需要> 0的时间来上载,而回调是在瞬间触发的.我使用$timeout
使它正常工作,但是那有点a脚.如何让回调等待文件上传?
1) In the controller, file
comes up undefined
obviously because even the smallest file takes >0s to upload while the callback is fired pretty much instantaneously. I got it work using $timeout
but thats a bit of a lame hack. How can I have the callback wait until the file is uploaded??
2)想法是上传文件,并使用Angular的数据绑定将其显示在img
标记中.这是因为src
填充了文件名,但是img的路径是什么.缓存中有一些临时位置还是什么?显然我还没有设置移动文件的路径.
2) The idea is to upload the file and display it in the img
tag using Angular's data-binding. This works in that src
is populated with the filename, but what is the path of the img. Some temporary location in cache or something?? Obviously I havent set a path to move the file yet.
任何帮助表示赞赏!
推荐答案
我还需要此功能,以了解如何设法立即显示图像.
I also needed this feature, some how I manage to display image instantly.
angular.module('HelloWorldApp', [])
.controller('HelloWorldController', function($scope) {
$scope.uploadavtar = function(files) {
//var fd = new FormData();
//Take the first selected file
//fd.append("file", files[0]);
var imagefile = document.querySelector('#file');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#temp_image')
.attr('src', e.target.result);
};
reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
}else{
console.log("Image not selected");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
</div>
<img src="" id="temp_image" width="100">
<div>
</div>
</div>
我使用的是laravel
+ Angularjs
,因此另一个与存储图像有关的帖子是: https://stackoverflow.com/a/34830307/2815635
I was using laravel
+ Angularjs
so another related post to store image is : https://stackoverflow.com/a/34830307/2815635
这篇关于角度上传图像并显示给用户的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!