[Javascript] suggerimenti su utilizzo onreadystatechange = function()

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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
@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
 

yadercontini

Nuovo Utente
5 Mar 2019
5
0
1
Chiedo scusa a tutti per la svista.
E ringrazio anticipatamente per i suggerimenti che mi arriveranno.
Saluti
Yader
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
Ciao a tutti, speravo in una risposta più solerte... poco interessante il problema?
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ì
 

marino51

Utente Attivo
28 Feb 2013
3.016
174
63
Lombardia
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
 

yadercontini

Nuovo Utente
5 Mar 2019
5
0
1
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.389
338
83
Se hai risolto la discussione finisce qui senza alcun problema.
ok.gif

Buon lacoro
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
L [Javascript] input variabili di scrittura con canvas Javascript 2
G [Javascript] Passare un valore via querystring Javascript 1
max1974 [Javascript] Funzione Errata procedura Javascript 2

Discussioni simili