javascript - الزاوي تحميل الصورة وعرض للمستخدم



angularjs file-upload (1)

أنا أيضا بحاجة إلى هذه الميزة، بعض كيف يمكنني إدارة لعرض الصورة على الفور.

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

معرف ترغب في تنفيذ واجهة المستخدم حيث يقوم المستخدم بتحديد صورة ويتم عرض هذه الصورة على الفور مرة أخرى لهم للمراجعة. يجب على المستخدم النقر على "إرسال" لتحميل / حفظ الصورة إلى ملفه الشخصي.

أواجه مشاكل مع "عرض على الفور مرة أخرى إلى جزء المستخدم".

أنا باستخدام فورمداتا الزاوي مع الترميز التالية وحدة تحكم:

وضع علامة على

<input id="chooseFile" type="file" file-model="picFile" />

<img src="{{uploadedImage}}" /> <!-- this populates with filename but what is the path?? -->

مراقب

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 بشكل واضح لأنه حتى أصغر ملف يأخذ> 0S لتحميل بينما يتم إطلاق رد الاتصال بشكل كبير جدا على الفور. حصلت عليه العمل باستخدام $timeout ولكن هذا قليلا من هاك عرجاء. كيف يمكن أن يكون رد الانتظار الانتظار حتى يتم تحميل الملف ؟؟

2) والفكرة هي لتحميل الملف وعرضه في علامة إمغ باستخدام الزاوي البيانات ملزمة. هذا يعمل في أن src هو ملء مع اسم الملف، ولكن ما هو مسار إمغ. بعض الموقع المؤقت في ذاكرة التخزين المؤقت أو شيء ؟؟ من الواضح أنني ملأت تعيين مسار لنقل الملف حتى الآن.

أي مساعدة تقدير!





form-data