Back to top

Autore Topic: File upload con progress bar  (Letto 3575 volte)

Offline micmem

  • Nuovo arrivato
  • *
  • Post: 2
    • Mostra profilo
File upload con progress bar
« il: 11 Feb 2017, 13:46:03 »
Buongiorno a tutti i partecipanti del forum.
Mi chiamo Michele e ho sviluppato un piccolo componente. Vi anticipo che so poco sia di php sia di joomla e quindi mi scuso se scriverò inesattezze  :) . Vorrei capire se si può riuscire a visualizzare tramite chiamate ajax e semplice php una progress bar per l'upload di file al salvataggio di una form.
Ho provato diverse strade ma senza successo:
- cercare di leggere il file sulla cartella temporanea, prima che il file venga spostato dal comando JFile::upload($src, $dest): da quello che ho capito il file non è disponibile finché non è stato spostato;
- utilizzare la funzionalità session.upload_progress.enable di php, che dal 5.4 è abilitata di default, ma anche se nella form che viene creata è presente il campo hidden con l'attributo name 'session.upload_progress.name', sul server non riesco ad intercettare la variabile di sessione composta dal prefisso 'session.upload_progress.prefix' impostato sul file php.ini. A questo scopo ho provato a controllare sia la sessione di Joomla che la sessione classica di php.

Qualcuno sa indicarmi se ho sbagliato qualcosa o se c'è un'altra strada praticabile?

Grazie della pazienza

Michele

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:File upload con progress bar
« Risposta #1 il: 11 Feb 2017, 13:49:33 »
Qui ti ci vuole l'aiuto o la dritta di Maurizio aka salvini mhoamed...
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Ahmed Salvini

  • Appassionato
  • ***
  • Post: 337
    • Mostra profilo
Re:File upload con progress bar
« Risposta #2 il: 11 Feb 2017, 14:47:17 »
Non saprei perchè l'unica volta che l'ho dovuto usare ho usato uno script JQuery integrato brutalmente in un componente.
una cosa tipo questo http://www.prashantblog.com/jquery-progress-bar-for-php-ajax-file-upload/

Io proverei a vedere come fa Joomla con l'update che usa una barra di caricamento. Se mi viene voglia ci do un occhiata.
« Ultima modifica: 11 Feb 2017, 14:50:05 da Ahmed Salvini »

Offline Alex21

  • Appassionato
  • ***
  • Post: 645
    • Mostra profilo
Re:File upload con progress bar
« Risposta #3 il: 12 Feb 2017, 02:21:06 »
Commento e post notturno. Beh, c'è anche gente che beve troppi caffè al pomeriggio ...
IL problema della progress bar senza utilizzo di metodi derivati flash non è semplice ed è stato risolto solo da qualche anno con l' arrivo delle  XMLHttpRequest livello 2 .
Prendendo spunto da un esempio in Rete, a suo tempo avevo fatto uno script (sempre per via dei troppi caffè), in javascript nativo che adoperava  il FormData,  nuovo anche lui all' epoca.
Con javascript si invia il file che, una volta arrivato al server, viene preso in carica  dal file Carica.php con l' avvertenza che il php $_POST['nome-del-tag-html']  diventa
$_POST['id-del-tag-html] per via del fatto che è stato inviato con un FormData e non con un form normale.
Safari allora non riusciva ancora a visualizzare la progress-bar ma solo le percentuali numeriche, adesso non so.
Tradurre una progress-bar all'interno di una estensione joomla è una faticata ulteriore, che si adoperi jQuery o javascript nativo.


Ciao!


Codice: [Seleziona]
function JSe(el){return document.getElementById(el);}
function Carica(){
var flFile = JSe('fl_file').files[0];
if(!flFile) {return 'file assente!';}
var jsForm = new FormData();
jsForm.append('fl_key', JSe('fl_key').value);
jsForm.append('fl_file', flFile);
var xhr = {};
if(window.ActiveXObject) {xhr = new ActiveXObject;} else {xhr = new XMLHttpRequest;}
if(typeof(xhr.upload) == 'undefined') {JSe('status').innerHTML = 'Impossibile proseguire!<br> XMLHttpRequest livello 2 NON supportato.<br> Browser consigliati: Chrome di Google e Firefox di Mozilla'; return;}
xhr.upload.addEventListener("progress", InProgress, false);
xhr.addEventListener("load", Completato, false);
xhr.addEventListener("error", Errori, false);
xhr.addEventListener("abort", Abortito, false);
xhr.open("POST", "Carica.php");
xhr.setRequestHeader("enctype", "multipart/form-data");
xhr.send(jsForm);
/* ************************ */
function InProgress(event){
JSe("fl_inviati").innerHTML = "Inviati "+ (Math.round(event.loaded /1024)).toString() +" Kbytes di "+ (Math.round(event.total /1024)).toString();
var percent = (event.loaded / event.total) * 100;
JSe("progressBar").value = Math.round(percent);
JSe("fl_status").innerHTML = Math.round(percent)+"% inviato... attendi";
}

function Completato(event){
var a = event.target.responseText.split('tuo_separatore');
JSe("progressBar").value = 0;
if(a[0] == 'si'){
             // tuo codice che fai con risposta positiva di upload
}
else {
JSe("fl_status").innerHTML = '<b>'+ a[1] + '</b>';
JSe('fl_report').innerHTML = 'Errore. Procedura interrotta.';
}
}

function Errori(event){ JSe("fl_status").innerHTML = "<b>'js Errore. Upload Fallito</b>"; }

function Abortito(event){ JSe("fl_status").innerHTML = "<b>js Errore. Upload Abortito</b>"; }
}
 


Offline micmem

  • Nuovo arrivato
  • *
  • Post: 2
    • Mostra profilo
Re:File upload con progress bar
« Risposta #4 il: 14 Feb 2017, 21:08:05 »
Grazie dei suggerimenti. Appena riesco faccio una prova.
Buona serata  :)

 



Web Design Bolzano Kreatif