Creare una barra di avanzamento con $.ajax

Axis18 · 10 Apr 2018

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 · 10 Apr 2018

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 · 11 Apr 2018

In sostanza tu vorresti fare un preload? Di quale tipo di dati, immagini, testo o un qualsiasi file?

Axis18 · 11 Apr 2018

Max 1 ha scritto:
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?

Max 1 · 11 Apr 2018

https://www.scoop.it/t/file-upload-progress-bar-con-jquery-e-php

Axis18 · 12 Apr 2018

Max 1 ha scritto:
https://www.scoop.it/t/file-upload-progress-bar-con-jquery-e-php

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;
}
/*
?>

Max 1 · 13 Apr 2018

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

Axis18 · 17 Apr 2018

Max 1 ha scritto:
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;
        }
    });
});

Cerca

Cerca

Creare una barra di avanzamento con $.ajax

Axis18

Nuovo Utente

Axis18

Nuovo Utente

Max 1

Super Moderatore

Axis18

Nuovo Utente

Max 1

Super Moderatore

Axis18

Nuovo Utente

Max 1

Super Moderatore

Axis18

Nuovo Utente

Discussioni simili