Estoy tratando de pedirle automáticamente a un usuario que cargue un archivo CSV y luego planeo acceder a los datos que contiene, pero no puedo hacerlo. ¿Qué estoy haciendo mal? input.name siempre está indefinido y ver el objeto completo no proporciona ningún detalle relevante.
El origen de esta consulta provino principalmente de la respuesta a esta pregunta Cuadro de diálogo Abrir archivo en JavaScript . Estoy tratando de lograr esto puramente en javascript, no en HTML.
$(document).ready(function() { var input = $(document.createElement('input')); input.attr("type", "file"); input.on('change',function(){ alert(JSON.stringify(input.name, null, 4)); alert(JSON.stringify(input, null, 4)); }); input.trigger('click'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>input es el valor de retorno de $() . Es un objeto jQuery, no un objeto DOM. Para acceder a la propiedad de name del objeto DOM subyacente, utilice el método prop .
input.prop('name')Finalmente lo hice funcionar. aquí está la solución
$(document).ready(function() { var input = $(document.createElement('input')); input.attr("type", "file"); input.on('change', function() { var csvFile = input[0].files[0]; var ext = csvFile.name.split(".").pop().toLowerCase(); if (ext != "csv") { alert('upload csv'); return false; } if (csvFile != undefined) { reader = new FileReader(); reader.onload = function(e) { var data = $.csv.toObjects(e.target.result); alert(JSON.stringify(data, null, 4)); $.each(data, function(index, val) { //do something with each row of data val.ColumnName }); } reader.readAsText(csvFile); } }); input.trigger('click'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>