read file through html and javascript programmatically

Question

read file through html and javascript programmatically

Navigation

#1 by (2 votes)
#2 by (1 votes)

-2

1) I have a sqlite file with information 2) Through a program I generate a * .csv file.

I would like on a NetBook or iPad or CromeCast or Cell, r display such information sequentially or at the user's request.

For example, if the user uses: +, right arrow or up arrow: advance 1 in 1 -, down arrow, or left arrow: go back 1 in 1 home: go to the beginning end: go to the end if you enter a number and then enter the corresponding line

I do not want to install an apache service or use iis, but I do use the browser.

By means of html and javascript I have managed to do it but the user before starting must select the file.csv

I would like you to click on the file.html or on a shortcut on the desktop, it is not necessary to select the .csv file.

What I have found on the web has allowed me to do this:

<div id="page-wrapper">
<div>
    Seleccionar Archivo: 
    <input type="file" id="fileInput">
</div>

    <input type = 'text' value= '1' id='txtLote' onkeypress="return         runScript(event)"  onkeyup="runScript(event)"style="text-align:right;"/>

<pre id="fileDisplayArea"></pre>
    <div id="divData" style="font-size:50px">

    </div>
</div>
<style>
    input:focus { 
       background-color: yellow;
    }
    body{
        font-family: courier;
   }
.tbl{font-size:50px;
font-weight: bold}
</style>
<script>
var nwLote = 0;
var array;
var maxArray;
document.getElementById("txtLote").focus();
document.getElementById("txtLote").select();

function runScript(e) 
{ 
    if (e.keyCode == 13)
        {
    var tb = document.getElementById("txtLote");
    nwLote = tb.value;
    if (nwLote > maxArray)
    {
        nwLote = maxArray;
    }
    if (nwLote < 1)
    {
        nwLote = 1;
    }
    mostrarDato(nwLote);
    return false;
}
if (e.keyCode == 43) // +
{
    nwLote = + nwLote + 1;
    if (nwLote > maxArray)
    {
        nwLote = maxArray;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
}
if (e.keyCode == 45) // -
{
    nwLote = nwLote - 1;
    if (nwLote < 1)
    {
        nwLote = 1;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
    }
    if (e.keyCode == 39) // derecha
    {
    nwLote = + nwLote + 1;
    if (nwLote > maxArray)
    {
        nwLote = maxArray;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
}
    if (e.keyCode == 37) // izquierda
    {
     nwLote = nwLote - 1;
    if (nwLote < 1)
    {
        nwLote = 1;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
}
    if (e.keyCode == 38) // arriba
    {
    nwLote = + nwLote + 1;
    if (nwLote > maxArray)
    {
        nwLote = maxArray;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
}
    if (e.keyCode == 40) // abajo
    {
    nwLote = nwLote - 1;
    if (nwLote < 1)
    {
        nwLote = 1;
    }
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);
    return false;
}
    if (e.keyCode == 36) // home
    {
    nwLote = 1;
    document.getElementById("txtLote").value=nwLote;       
    mostrarDato(nwLote);
    return false;
}
    if (e.keyCode == 35) // end
    {
    nwLote = maxArray;  
    document.getElementById("txtLote").value=nwLote;    
    mostrarDato(nwLote);       
    return false;
}
    return true;
}
function mostrarDato(nwLote){
var divData = document.getElementById('divData');
var string = array[nwLote-1] ;
var array1 = string.split(",");
var contenido = "<table class='tbl'>";
contenido += "<tr><td>LOTE</td><td>" + array1[0] + "</td></tr>";
contenido += "<tr><td>DETALLE</td><td>" + array1[1] + "</td></tr>";
contenido += "<tr><td>CANTIDAD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>" + array1[2] + "</td></tr>";
contenido += "<tr><td>BASE</td><td>" + array1[3] + "</td></tr>";
contenido += "<tr><td>REMITE</td><td>" + array1[6] + "</td></tr>";
contenido += "<tr><td>REMITO</td><td>" + array1[4] + "</td></tr>";
contenido += "<tr><td>RENGLON</td><td>" + array1[5] + "</td></tr>";
contenido += "</table>";

divData.innerHTML = contenido;
document.getElementById("txtLote").focus();
document.getElementById("txtLote").select();    
}
window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var textType = /text.*/;

    if (file.type.match(textType)) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var string = reader.result ;
            array = string.split("|");
            maxArray = array.length-1;
            var string1 = array[0] ;
            var array1 = string1.split(",");
            var contenido = "<table class='tbl'>";
            contenido += "<tr><td>LOTE</td><td>" + array1[0] + "</td></tr>";
            contenido += "<tr><td>DETALLE</td><td>" + array1[1] + "</td>        </tr>";
            contenido += "<tr><td>CANTIDAD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>" + array1[2] + "</td></tr>";
            contenido += "<tr><td>BASE</td><td>" + array1[3] + "</td></tr>";
            contenido += "<tr><td>REMITE</td><td>" + array1[6] + "</td></tr>";
            contenido += "<tr><td>REMITO</td><td>" + array1[4] + "</td></tr>";
            contenido += "<tr><td>RENGLON</td><td>" + array1[5] + "</td></tr>";
            contenido += "</table>";
            divData.innerHTML = contenido;
            document.getElementById("txtLote").focus();
            document.getElementById("txtLote").select();
        }

        reader.readAsText(file);    
    } else {
        fileDisplayArea.innerText = "File not supported!"
    }
});
}
</script>

I have found many sites where it is reported that in html5 you can not access a file for a security topic (in a programmatic way), which is necessary to give the user the possibility to search for said file through the "input" that is find the beginning of the code.

QUESTION A) I find it much more unsafe for the user to search the file, I do not understand why they say it's safer?

QUESTION B) Is there a way to access this file without the need for "input", indicating by programming what the file is and how would it be done?

All this using HTML and javascript.

Here I leave part of the .csv file so you can try it.

1, TV 14, 0.00, 1, 337721, 7, QUORTIONI RUBEN | 2, ENVELOPES OF NYLON, 0.00, 400, 337656, 25, PEREZ LUIS | 3, LOT WITH HANGERS, 0.00, 1, 337664, 1, RODOLFO REY | 4, CAJON DE MADERA VALIJA, 0.00, 1, 337723, 5, COLOMBO CARMELO | 5, HOOKS FOR BOARD, 0.00, 60, 337656, 24, PEREZ LUIS | 6, SOPORTE P / TV, 0.00, 1, 337726, 5, TAMBORINI CARLOS | 7, LOTE C / REVISTAS, 0.00, 1, 337727, 8, VARELA ANA | 8, MUSIC TEAM C / 6 PARLANTES, 0.00, 1, 337723, 8, COLOMBO CARMELO | 9, LOTS C / BOOKS, 0.00, 2, 337707, 16, PEREYRA ANDRES |

javascript html

asked by Hugo Mariño 16.07.2016 в 01:55

source

2 answers

1

Answer to Question A

The browser is on the user's side and defends its interests . And it's not on the programmer's side. Why? because there could be a dishonest programmer (even within a group of honest programmers) who in a part of the program will search the user's disk for files that seem private (agenda.xls, etc) and send them to the server to spy on users.

(Except for possible security errors) one should be more or less certain that using Firefox (or Chrome or any of the most prestigious browsers) something like this could not happen (unless you use an old version or have installed extensions or pluggins from which you can not guarantee what they are doing).

Answer to question B

Not using HTML5 and Javascript in its current version. Yes programming extensions. If the program you are designing is for use only by people who have extreme confidence, you can convince them to install that extension.

But if you have that confidence, you can explain to them that they do it in the right way (by specifying the file). You can also use "drag and drop" (drag and drop) on some area of your page to take the name of the file. The same is the user who has to choose it

answered by 16.07.2016 в 15:35

How can I put a hyperlink in the HTML5 list? Azure HTTP 500 Error in App Syntax of php or Server? [closed]

score 2 · Accepted Answer

QUESTION A) It seems to me much more unsafe for the user to search the file, I do not understand why they say it is more secure?

Being a manual, the user decides what to do , can for example decide to open in file "equis.csv" the one used to complete the work in question, but not open another called "secreto.csv" ".. On the other hand, in an automatic or substantive process, it is the program that would make the decision and therefore it is not even allowed.

QUESTION B) Is there a way to access this file without the need for "input", indicating by programming what the file is and how it would be done?

It is possible if you create a browser extension, but it would not be a page in itself and it will not work in all browsers in the same way, or even with the same code, because each one has its own API and way to package the extension. . In addition, some browsers limit you to a certain group of specific folders where you can search or open the files. Keep in mind that to install an extension, you need a decision from the user.

Another option is to embed your page as an application based on Apache Cordoba (or children), but this requires the installation step, which also includes a user's decision.