Angular upload image and display to user

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".

I am using angular FormData with the following markup & controller:

MARKUP

<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;

});

I have 2 primary issues with the above code (described in comments):

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) 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.

Any help appreciated!

---

我也需要这个功能，一些我如何设法立即显示图像。

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>

链接地址: http://www.djcxy.com/p/5358.html

上一篇: 显示节点（服务器）到角度2的图像？

下一篇: 角度上传图片并显示给用户