एंगुलरजेएस

Question

के साथ एचटीएमएल 5 फ़ाइल अपलोड करें मैं एक फ़ाइल की सामग्री को पढ़ने के लिए कोणीय प्राप्त करने की कोशिश कर रहा हूं जिसे उपयोगकर्ता <input type="file" नियंत्रण के माध्यम से चुनता है। यहां तक ​​कि कोणीय हालांकि फाइल अपलोड नियंत्रण के लिए निर्देश नहीं है, यह $apply है कि ठीक करने के लिए एक फोन के साथ आसान होना चाहिए:

function MyController($scope) { 
    $('#myFile').on('change', function() { 
    var that = this; 
    $scope.$apply(function() { $scope.files = that.files }); 
    }); 
} 

दुर्भाग्य से, गतिविधि सक्रिय कभी नहीं किया गया है। ऐसा लगता है कि चयनकर्ता सही डीओएम तत्व को संदर्भित करने में असमर्थ है: भले ही चयनकर्ता तत्व पाता है, फाइलों की सूची हमेशा खाली होती है। यह तब भी होता है जब मैं जेएस कंसोल के साथ घूमता हूं। इसके बजाय डीओएम निरीक्षक की संपत्तियों में फ़ाइल सूची है।

यह मुझे पागल कर रहा है, लेकिन एकमात्र तरीका यह है कि मुझे अब तक काम करने के लिए मिल गया है एक इनलाइन इवेंट हैंडलर का उपयोग करना जो वैश्विक चर को असाइन करता है। Jquery चयनकर्ता एक और आइटम क्यों लौट रहा है? क्या कुछ टेम्पलेट संकलन मम्बो-जंबो है जो कोणीय करता है जो चयनकर्ताओं को भ्रमित करता है?

Answer 1

यहाँ मैं क्या कर रहा है:

http://plnkr.co/edit/JPxSCyrxosVXfZnzEIuS?p=preview

app.directive('filelistBind', function() { 
    return function(scope, elm, attrs) { 
    elm.bind('change', function(evt) { 
     scope.$apply(function() { 
     scope[ attrs.name ] = evt.target.files; 
     console.log(scope[ attrs.name ]); 
     }); 
    }); 
    }; 
}); 

टेम्पलेट:

<input type="file" filelist-bind name="files"/> 
<p>selected files : <pre>{{ files | json }}</pre></p> 

कार्य इस प्रकार का है, तो आप निश्चित रूप से निर्देश का उपयोग करना चाहते हैं। लेकिन मुझे लगता है कि आपकी मुख्य चिंता यह है कि चयनित फ़ाइल ऑब्जेक्ट्स का उपयोग कैसे करें और मेरे उदाहरण को यह स्पष्ट करना चाहिए।

Answer 2

आप इस प्लगइन

https://github.com/danialfarid/angular-file-upload

यह मूल रूप से निहायती बकवास के जवाब की तरह एक निर्देश है कि FileAPI फ़्लैश polyfill के साथ गैर एचटीएमएल 5 ब्राउज़रों का ख्याल रखता है और $ है उपयोग कर सकते हैं आप कोणीय के साथ देख रहे हैं फ़ाइल अपलोड करने के लिए AJAX के माध्यम से वास्तविक फ़ाइल अपलोड करने के लिए http.uploadFile फ़ंक्शन।

Answer 3

यह site एचटीएमएल 5 फ़ाइल अपलोड के लिए कोणीय सेवा का उपयोग करता है। एक सरल तरीका एक नियंत्रक सेट करना है जो सेवा को कॉल करता है और एसिंक्रोनस कॉल पूरा होने पर यूआई को अपडेट करता है।

नियंत्रक:

myapp.controller('fileUploadCtrl', ['$scope', '$q', 'FileInputService', function ($scope, $q, FileInputService) { 
      $scope.fileInputContent = ""; 
      $scope.onFileUpload = function (element) { 
       $scope.$apply(function (scope) { 
        var file = element.files[0]; 
        FileInputService.readFileAsync(file).then(function (fileInputContent) { 
         $scope.fileInputContent = fileInputContent; 
        }); 
       }); 
      }; 
     }]); 

सेवा:

myapp.service('FileInputService', function ($q) { 

    this.readFileAsync = function (file) { 
     var deferred = $q.defer(), 
     fileReader = new FileReader(), 
     fileReader.readAsText(file); 

     fileReader.onload = function (e) { 
      deferred.resolve(e.target.result); 
     }; 
     return deferred.promise; 
    }; 
}); 

टेम्पलेट:

Choose File <input type="file" onchange="angular.element(this).scope().onFileUpload(this)"> 
<br /> 
{{fileInputContent}} 

संदर्भ: आप पूर्ण स्रोत कोड खोजने के लिए और संदर्भित कर सकते हैं on this site.