[Javascript] suggerimenti su utilizzo onreadystatechange = function()

Y

yadercontini

Nuovo Utente
5 Mar 2019
5
0
1
Ciao a tutti, sono appena iscritto e poco esperto in javascript.
Sto sbattendo la testa su un problema che è probabilmente estremamente semplice da risolvere, ma dal quale non riesco a venirne fuori.
Per questo motivo, dopo aver fatto un po' di ricerca senza alcun risultato, chiedo a voi se qualcuno può darmi un semplice suggerimento in merito all'utilizzo di onreadystatechange = function() per poter ottenere il risultato del punto e):
a) utilizzo una semplice pagina html contente il codice che ho inserito sotto, senza alcuna necessità di connettermi a database o a server o a internet, ma lavorando solo ed esclusivamente in locale;
b) seleziono più file di testo, ad es. file XML, presenti nella stessa cartella del file html utilizzando il classico <input type="file" multiple /> (funziona perfettamente);
c) recupero i nomi ed i contenuti dei file selezionati (funziona perfettamente);
d) aggiungo alla fine della pagina corrente i nomi dei file selezionati (funziona perfettamente);
e) aggiungo, sempre alla fine della pagina, tutti i contenuti dei file selezionati --> non funziona correttamente.
Mi spiego meglio:
Ho pensato di recuperare i contenuti utilizzando:
- stampa.push(this.responseText) all'interno di onreadystatechange = function();
(ma ho provato anche con il più semplice
- stampa += this.responseText; in quest'ultimo caso cambiando ovviamente la tipologia di variabile)
e successivamente di aggiungere i dati alla fine della pagina utilizzando
- document.getElementById('listacontenuti').innerHTML = stampa.join('') (oppure semplicemente = stampa, se per recuperarli ho usato stampa +=).
Quello che ottengo è:
1) se uso document.getElementById('listacontenuti').innerHTML = dall'interno di onreadystatechange = function(), viene accodato sempre un solo contenuto, quello dell'ultimo file, perché probabilmente vengono "sovrascritte" le precedenti aggiunte;
2) se uso document.getElementById('listacontenuti').innerHTML = dall'esterno di onreadystatechange = function(), non viene accodato più nulla, come se la variabile stampa (che comunque è dichiara a livello superiore e mi aspettavo venisse letta e valorizzata in modo trasparente) venisse "azzerata".
Anche la variabile i (il contatore del ciclo for) si comporta allo stesso modo.
Il codice della pagina è il seguente (il comando document.getElementById('listacontenuti').innerHTML = stampa.join('') è ripetuto in più punti perché ho fatto vari tentativi, commentati a lato):
Codice: 
<html>
<head>
<title>
</title>
</header>
<body>
<h1>LISTA CONTENUTO FILE SELEZIONATI</h1>
<input type="file" id="filedaselezionare" name="files[]" multiple /><br/>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files;
    var output = [], stampa = [], nomefile;
   var xmlhttp = new XMLHttpRequest();
   for (var i = 0, f; f = files; i++) {
       output.push('<li>', escape(f.name), '</li>');
       nomeFile = f.name ;
       xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           stampa.push(this.responseText);
          document.getElementById('listacontenuti').innerHTML = stampa.join('');  // funziona ma aggiunge solo un contenuto perché probabilmente "sovrascrive" i precedenti
       }
//   document.getElementById('listacontenuti').innerHTML = "Stampa: " + stampa.join('');   // funziona anche questo, ma aggiunge sempre solo un contenuto perché probabilmente "sovrascrive" i precedenti
   console.log(stampa);
   };
   xmlhttp.open("GET", nomeFile , true);
   xmlhttp.send();
//   document.getElementById('listacontenuti').innerHTML = stampa.join('');   // se esco dalla funzione onreadystatechange = function() non viene aggiunto più nulla alla pagina
   }
//   document.getElementById('listacontenuti').innerHTML = stampa.join('');  // anche in questo caso, al di fuori della funzione onreadystatechange = function() non aggiunge più nulla alla pagina
   document.getElementById('listafile').innerHTML = '<ol>' + output.join('') + '</ol>';   // mi elenca, correttamente, la lista dei nomi dei file selezionati
   }
  document.getElementById('filedaselezionare').addEventListener('change', handleFileSelect, false);
</script>
<output id="listafile"></output>
<output ID="listacontenuti"></output>
</body>
</html>
Ribadendo che sono neofita, spero di essere stato abbastanza chiaro e vi ringrazio per i suggerimenti.
Yader
 
Ultima modifica di un moderatore:
@yadercontini
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code-gif.6151
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box-inserisci-2-png-jpg.6152

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro
 
Chiedo scusa a tutti per la svista.
E ringrazio anticipatamente per i suggerimenti che mi arriveranno.
Saluti
Yader
 
yadercontini ha scritto:
Ciao a tutti, speravo in una risposta più solerte... poco interessante il problema?
Clicca per allargare...
Qui nessuno è obbligato a rispondere e fra i collegati al forum conoscere il tuo problema!
Bisogna che tu abbia pazienza e aspetti che qualcuno conosca l'argomento e abbia voglia di rispondere! Nei forum funziona così
 
spesso é difficile rispondere perché si leggono affermazioni non vere
occorre quindi capire perché vengono fatte e da cosa poi sono smentite

per esempio,
var output = [], stampa = [],
messe all'interno della funzione, reinizializzano le due array ogni volta che la funzione viene richiamata
quindi non si potrà mai ottenere tutto quello che é stato dichiarato come ottenuto

vi é anche diverso altro codice non proprio utilizzato per lo scopo voluto
con un loop senza fine per completare il quadro

devi anche renderti conto della differenza tra server e client e dello scopo dell'input file

ti posto una traccia per ciò che vuoi fare, vi sono alcuni alert che dovrebbero farti capire il funzionamento
ma credo proprio che, come hai strutturato le cose, in ambito client/server, non funzionerà nulla
perché non puoi leggere un file dal client (giusto per sicurezza)
ma solo fare l'upload sul server (quindi sei tu che autorizzi il trasferimento del file)
in ambiente locale é diverso ma non é la filosofia con cui lavorare in ambiente web

HTML: 
<html>
<head>
  <title></title>
</header>
<body>
<h3>LISTA CONTENUTO FILE SELEZIONATI</h3>
<input type="file" id="filedaselezionare" name="files[]" multiple /><br/>
<output id="listafile"></output>
<output ID="listacontenuti"></output>

<script>
  var output = [], stampa = [];

  function handleFileSelect(evt)
  {
    alert('handleFileSelect');

    var files = evt.target.files;

    var flen= files.length;
    alert('flen = '+flen);

    var nomeFile = document.getElementById("filedaselezionare").value;
    alert('nomeFile = '+nomeFile);

    output.push('<li>'+escape(nomeFile)+'</li>');

    var olen= output.length;
    alert('olen = '+olen);

    document.getElementById('listafile').innerHTML = '<ol>'+output.join('')+'</ol>';
  }
  document.getElementById('filedaselezionare').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>

questa é la sola lista dei files (2)

upload_2019-3-7_15-34-32.png
 
Ciao a tutti, innanzitutto desidero precisare che, pur essendo nuovo di questo forum, non sono nuovo dei forum in generale e quindi so benissimo come funzionano e che nessuno è obbligato a rispondermi o a conoscere il mio problema, che devo avere pazienza che qualcuno conosca l'argomento e abbia abbia voglia di rispondere, etc.
La mia affermazione precedente "...speravo in una risposta più solerte..." è scaturita semplicemente dal fatto che, probabilmente per ignoranza in materia, ritenevo che il problema da me sottoposto fosse una vera bazzecola per dei maestri come voi, proprio perché, come ho specificato all'inizio, con questo codice non dovrò mai lavorare in connessione ad un server ma esclusivamente in locale.
Oltre a ciò, sempre in modo erroneo, il non aver ricevuto alcuna risposta dopo più di un giorno mi ha fatto pensare di essere stato considerato un pivello che affronta argomenti poco interessanti, e questo mi sarebbe dispiaciuto.
Detto questo, chiedo nuovamente scusa per quanto è stato ed eventualmente verrà ritenuto da voi scorretto e ringrazio di cuore Marino51 per i suoi consigli ed il suo codice.
Vi informo che comunque sono riuscito a risolvere da solo il problema ponendo a false il comando open: adesso per le mie esigenze funziona in modo soddisfacente.
Non so in questo caso quali ulteriori obblighi o incombenze vi siano da espletare in questo forum, e quindi chiedo nuovamente scusa per le eventuali altre mie mancanze e vi saluto.
 
Se hai risolto la discussione finisce qui senza alcun problema.
ok.gif

Buon lacoro
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
1K
Javascript
IlTizioScriptato
I
S
Impossibile scorrere un oggetto in JavaScript
Risposte
0
Visite
1K
Javascript
steven myth
S
N
Passare array da php a javascript
Risposte
5
Visite
2K
PHP
WmbertSea
WmbertSea
L
Quiz javascript funzionante da migliorare
Risposte
0
Visite
3K
Javascript
Lenigmista
L
P
  • Bloccata
errore 404 con javascript
Risposte
2
Visite
1K
Javascript
Max 1
Max 1
D
  • Bloccata
aiuto funzioni javascript
Risposte
1
Visite
876
Javascript
Max 1
Max 1
M
Upload immagine con javascript problemi con FormData()
Risposte
1
Visite
983
Javascript
MBlackmore
M
L
  • Bloccata
countdown multiplo javascript
Risposte
1
Visite
963
Javascript
Max 1
Max 1
S
  • Bloccata
Problemi Javascript + Aruba
Risposte
2
Visite
2K
Javascript
Max 1
Max 1
M
Inviare un file su un server remoto con JavaScript
Risposte
0
Visite
1K
Javascript
Mirawara
M
T
a href="javascript:;"
Risposte
1
Visite
2K
Javascript
sonusood2022
S
F
Creare elementi html con javascript
Risposte
3
Visite
3K
Javascript
McLeanerGla
M
A
pulsante di update campo mysql con javascript
Risposte
2
Visite
1K
Javascript
AndreaCerre
A
8
Javascript - PDF Form
Risposte
0
Visite
2K
Javascript
81bankai
8
B
javascript per problemi con pdf e Safari
Risposte
0
Visite
3K
Javascript
bibliofila
B
N
informazione javascript
Risposte
0
Visite
2K
Programmazione
Nedved95
N
I
Eecuzione di javascript in ciclo foreach php.
Risposte
7
Visite
2K
PHP
inftecnica
I
P
javascript:document.forms
Risposte
7
Visite
2K
Javascript
Max 1
Max 1
S
Consiglio esercizio Javascript
Risposte
2
Visite
2K
Javascript
ninja72
N
Alto Basso