कोणीय

Question

में इनपुट द्वारा प्रदान की गई एक CSV फ़ाइल को पार्स करना मैं एक वेबपैप बना रहा हूं जिसमें .csv फ़ाइल के अपलोड शामिल हैं।

मेरे सर्वर पर पूरी फ़ाइल अपलोड करने के बजाय, फिर तालिका में प्रत्येक पंक्ति को जोड़कर PHP के लिए धन्यवाद, मैं कोणीय में फ़ाइल को पार्स करना चाहता हूं, फिर पार्स लाइनों (रीस्टैंगुलर के लिए धन्यवाद) जोड़ें। इस तरह, मैं उन्हें अपलोड करने से पहले कुछ "त्रुटियों" को पुनः प्राप्त करने में सक्षम होना चाहिए (या नहीं)।

<input type="file" data-file="param.file" /> 

file निर्देश:

app.directive('file', function(){ 
    return { 
    scope: { 
     file: '=' 
    }, 
    link: function(scope, el, attrs){ 
     el.bind('change', function(event){ 
     var files = event.target.files; 
     var file = files[0]; 
     scope.file = file ? file.name : undefined; 
     scope.$apply(); 
     }); 
    } 
    }; 
}); 

इस तरह, मैं कर सकते हैं:

एक दृश्य में, मैं एक निर्देश फ़ाइल कहा जाता है (http://angularjstutorial.blogspot.fr/2012/12/angularjs-with-input-file-directive.html स्रोत) के साथ एक सरल फ़ाइल इनपुट बना लिया है, जब उपयोगकर्ता फ़ाइल चुनता है तो पुनः प्राप्त करें। दुर्भाग्यवश, मुझे केवल फ़ाइल का नाम मिल रहा है।

मैं एक स्ट्रिंग है, जो मैं इस फिल्टर करने के लिए धन्यवाद विभाजित कर देंगे में सीएसवी (स्रोत: parsing CSV in Javascript and AngularJS): पार्स करने के लिए करना चाहते हैं

app.filter('csvToObj',function(){ 
    return function(input){ 
    var rows=input.split('\n'); 
    var obj=[]; 
    angular.forEach(rows,function(val){ 
     var o=val.split(';'); 
     obj.push({ 
     designation:o[1], 
     ... 
     km:o[11] 
     }); 
    }); 
    return obj; 
    }; 
}); 

मैं कैसे सीएसवी द्वारा प्रदान की फ़ाइल में डेटा प्राप्त कर सकते हैं फ़ाइल नाम के बजाय इनपुट?

अग्रिम धन्यवाद।

Answer 1

ठीक है, मुझे फ़ाइलों को अपलोड करने के लिए मौजूदा मॉड्यूल पर खोज करके समाधान मिला। अगर यह किसी को रूचि देता है तो मैं इसे यहां पोस्ट करता हूं।

<input type="file" file-change="handler($event,files)" ng-model="MyFiles" /> 

निर्देश अब है:

app.directive('fileChange',['$parse', function($parse){ 
    return{ 
    require:'ngModel', 
    restrict:'A', 
    link:function($scope,element,attrs,ngModel){ 
     var attrHandler=$parse(attrs['fileChange']); 
     var handler=function(e){ 
     $scope.$apply(function(){ 
      attrHandler($scope,{$event:e,files:e.target.files}); 
     }); 
     }; 
     element[0].addEventListener('change',handler,false); 
    } 
    } 
}]); 

नियंत्रक में ($ फ़िल्टर जोड़ने के लिए मत भूलना

ध्यान में रखते हुए मैं घटना को गति प्रदान करने के निर्देश बदल दिया है नियंत्रक में यदि आप इसका उपयोग करना चाहते हैं):

$scope.MyFiles=[]; 

$scope.handler=function(e,files){ 
    var reader=new FileReader(); 
    reader.onload=function(e){ 
     var string=reader.result; 
     var obj=$filter('csvToObj')(string); 
     //do what you want with obj ! 
    } 
    reader.readAsText(files[0]); 
} 

फ़िल्टर अभी भी वही है (सिवाय इसके कि मैंने ro को स्थानांतरित कर दिया है ws सरणी मेरी सीएसवी फाइलों के शीर्षलेख आयात नहीं करने के लिए)।