Creare una barra di avanzamento con $.ajax

Axis18

Nuovo Utente
10 Apr 2018
12
0
1
25
Ciao a tutti,

Vorrei creare una barra di avanzamento con Ajax possibilmente usando jQuery che mi permetta di monitorare l’upload di un file sul server.

Il mio script attuale è il seguente:

htmlpage.php

HTML:
<form enctype="multipart/form-data" action="upload.php" method="POST">

  <input type="hidden" name="MAX_FILE_SIZE" value="4294967296">

  Invia questo file: <input name="userfile" type="file">

  <input type="submit" value="Upload file">

</form>

upload.php

PHP:
<?php

$userfile_tmp = $_FILES['userfile']['tmp_name'];

$userfile_name = $_FILES['userfile']['name'];

if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {

header('Location: htmlpage.php');

}

header('Location: htmlpage.php');

?>

Ho letto qui il funzionamento di $.ajax (davvero una bella guida!) ma fatico a capire i passaggi successivi:

https://www.mrw.it/jquery/lavorare-ajax_10463.html

Devo creare una funzione in PHP che legga la dimensione del file in $userfile_tmp e restituisca l’informazione alla pagina html secondo dopo secondo con Ajax oppure esiste una funzione di jQuery che cattura l’avanzamento dell’upload da qualche variabile del browser? Non ho trovato online script pronti e funzionanti da studiare e comprendere nel dettaglio.

Buona serata a tutti!
 

Axis18

Nuovo Utente
10 Apr 2018
12
0
1
25
Ho provato in questo modo ma non vedo <progress> colorarsi:
HTML:
<!doctype html>
<html lang="it">
<head>
<script src="jquery-3.3.1.min.js"></script>
<script>
var progressBar = document.getElementById("progress"),
loadBtn = document.getElementById("button"),
display = document.getElementById("display");
function upload(data) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload_file.php", true);
if (xhr.upload) {
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
        display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
        }
    }
    xhr.upload.onloadstart = function(e) {
        progressBar.value = 0;
        display.innerText = '0%';
        }
    xhr.upload.onloadend = function(e) {
        progressBar.value = e.loaded;
        loadBtn.disabled = false;
        loadBtn.innerHTML = 'Upload file';
        }
}
xhr.send(data);
}
function buildFormData() {
    var fd = new FormData();
    for (var i = 0; i < 3000; i += 1) {
        fd.append('data[]', Math.floor(Math.random() * 999999));
        }
return fd;
}
loadBtn.addEventListener("click", function(e) {
    this.disabled = true;
    this.innerHTML = "Uploading...";
    upload(buildFormData());
});
</script>
<title>Titolo</title>
</head>
<body>
<form enctype="multipart/form-data" action="upload_file.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="4294967296">
    Invia questo file: <input name="userfile" type="file">
    <input type="submit" value="Upload file" id="button">
    <progress id="progress" value="0"></progress>
    <span id="display"></span>
</form>
</body>
</html>
Perché?
ciao
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
In sostanza tu vorresti fare un preload? Di quale tipo di dati, immagini, testo o un qualsiasi file?
 

Axis18

Nuovo Utente
10 Apr 2018
12
0
1
25
In sostanza tu vorresti fare un preload? Di quale tipo di dati, immagini, testo o un qualsiasi file?

Si esatto, l'upload di un file generico. Un file qualsiasi comunque no. Tutti tranne alcuni come ad esempio i .exe ma valido l'upload con PHP (il file che vedi sopra è depurato di tanta roba rispetto al mio).

Il problema che registro è esclusivamente con jquery perché il file sul server viene caricato senza problemi. Lo script funziona egregiamente, i miei unici problemi sono sulla barra di scorrimento.

Sapresti dirmi dove sbaglio?
 

Axis18

Nuovo Utente
10 Apr 2018
12
0
1
25

Premetto che mi sembra un codice stranamente complesso e che usa estensioni di PHP non sempre disponibili. Detto ciò XAMPP dovrebbe essere dotato dell'estensione ma non riesco a caricare comunque nessun file e non ottengo nessun messaggio di errore.

Il codice sul mio server non funziona:

index.php

PHP:
<?php
$uiq = uniqid();
$image_folder = "uploads/";
$uploaded = false;

if(isset($_POST['upload_image'])){
if($_FILES['userImage']['error'] == 0 ){
$up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']);
if($up){
$uploaded = true;
}
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var randIDS = '<?php echo $uiq?>';
// Add Hidden Field
var hidden = $("<input>");
hidden.attr({
name:"APC_UPLOAD_PROGRESS",
id:"progress_key",
type:"hidden",
value:randIDS
});
$("#uploadImage").prepend(hidden);
$("#uploadImage").submit(function(e){

var p = $(this);
p.attr('target','tmpForm');

// creating iframe
if($("#tmpForm").length == 0){
var frame = $("<iframe>");
frame.attr({
name:'tmpForm',
id:'tmpForm',
action:'about:blank',
border:0
}).css('display','none');
p.after(frame);
}
// Start file upload
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
function(data){
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
clearInterval(loadLoader);
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
if(uploaded < 100)
var loader = setInterval(loadLoader,2000);
});

var loadLoader = function(){
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)
{
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
parent.location.href="index.php?success";
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
});
}
});});
</script>

<form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">
<label>Upload File</label>
<input type="file" name="userImage" id="userImage" />
<span class="badge badge-info" style="display:none;">0%</span>
<input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" />
<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>
</form>

get_progress.php

PHP:
<?php
session_start();
error_reporting(0);

// For PHP 5.4 users
$progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name
$current = $_SESSION[$progress_key]["bytes_processed"];
$total = $_SESSION[$progress_key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;

// For PHP 5.2+ php_apc.dll or php_apc.so holder
/*
if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;
exit;
}
/*
?>
 

Axis18

Nuovo Utente
10 Apr 2018
12
0
1
25
Non è che si può provare tutti i codici!
Basta fare una piccola ricerca e sicuramente potrai trovare il codice che ti piace ce ne sono a iosa, vedi anche qui
https://www.google.it/search?client...1.64.psy-ab..0.3.324...33i160k1.0.iQBgXdvhh54

Ho trovato uno script gradevole che usa un plugin di jQuery ma ora ho un altro problema.

Dalla pagina A chiamo con il form la pagina B che si occupa di fare l’upload del file.

Con JS genero la barra che scorre sulla pagina.

Al termine dell’upload quando torno alla pagina A vorrei usare una variabile di sessione creata in B che mi informa sull’esito dell’upload.

Se uso questo plugin la variabile di sessione non viene creata o non viene trasmessa mentre se non uso il plugin la variabile di sessione viene creata e trasmessa ad A.

Come posso risolvere?

Ecco il codice:


Codice:
$(document).ready(function() {
     $('#uploadForm').submit(function(e) {
        if($('#userImage').val()) {
            e.preventDefault();
            $('#loader-icon').show();
            $(this).ajaxSubmit({
                beforeSubmit: function() {
                  $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                },
                success:function (){
                    $('#loader-icon').hide();
                },
                resetForm: true
            });
            return false;
        }
    });
});
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Come creare una barra di ricerca in flash Flash 1
L Creare una forma geometrica Photoshop 1
W Creare link di una dato Classic ASP 0
MarcoGrazia Creare una password Snippet Javascript 0
L Creare una pagina pre-home WordPress 1
L creare oggetti da una classe tramite un form Javascript 0
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
V [WordPress] Creare una struttura di articoli da una struttura di cartelle WordPress 1
jonnino2004 Sito .it vale la pena creare una versione in inglese? SEO e Posizionamento 1
S [WordPress] Creare una select box con partita iva e codice fiscale in base a una logica. WordPress 0
B funzioni per creare file e inserirli dentro una certa cartella in php? PHP 1
utente è possibile creare una pagina php che copia interamente il contenuto di un'altra pagina ? PHP 10
M come creare un popup con CSS da una pagina esterna? jQuery 1
L [php e xml] per creare una galleria fotografica con diversi file xml PHP 0
deejayr Creare un link URL ad un pulsante di una pagina web. Javascript 4
P [PHP] come creare una chat PHP 24
S creare una tabella da codice PHP 4
Gabriele Visioli Come creare uno spoiler in una pagina o post WordPress 1
A Creare una fattura con dati di intestazione estratti da tabella MySQL 0
P [CERCO] esperto per creare una chat room seria Offerte e Richieste di Lavoro e/o Collaborazione 1
M creare una tabella dove inserire i dati del database Database 1
N Creare una web community Discussioni Varie 6
S PHP: creare un link in una pagina PHP 7
F mysqli creare una select con valori dal db PHP 4
R Creare una classifica con Access 2007 Database 1
G Creare una forma irregolare colorata e poi modellarla con photoshop. Photoshop 7
M Access-Query per creare una tabella con la data nel nome tabella MS Access 0
felino [CSS] Immagine, creare una striscia nell'angolo superiore della foto HTML e CSS 10
A Creare una classe espressione Java 1
R Creare una videochat a pagamento Offerte e Richieste di Lavoro e/o Collaborazione 2
gaia creare una tabella dall'unione di due tabelle MySQL 3
M creare una lista di commenti in un database PHP 1
W Da dove si parte a creare una App?? Sviluppo app per Android 2
T vBulletin 3.8.x E' possibile creare una nuova pagina in PHP nel forum? CMS (Content Management System) 0
J Creare una classe view php PHP 0
felino [JS] Creare una variabile dinamicamente tramite Ciclo For Javascript 4
P Creare e animare una progess bar PHP 13
M creare una ListView non cliccabile Sviluppo app per Android 1
R creare una pagina su sito web HTML e CSS 2
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
denisgligor ciao, vorrei creare una pagina personale per ogni utente con un dominio di terzo livello... si può ? PHP 0
A Creare una galleria foto senza refresh PHP 0
A Creare nuova casella di una tabella Javascript 4
A Creare una nuova cartella utente PHP 3
T creare una serie di combobox e text box e che salvano un file di text sul disco si può ? Visual Basic 1
8 Creare un figlio di una classe generica HTML e CSS 7
C Creare una form con pulsanti di scelta macro Visual Basic 1
C Creare una macro per inserimento appuntamenti .NET Framework 1

Discussioni simili