pagina - Barra de progreso PHP Subir Ajax

barra de progreso jquery ajax

Question

<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="uploaded" type="file" />
<input type="submit" value="Upload" />
</form>
<?php
if(isset($_REQUEST[''submit''])){
$target = "data/".basename( $_FILES[''uploaded''][''name'']) ;
move_uploaded_file($_FILES[''uploaded''][''tmp_name''], $target);
}
?>

Conozco Javascript, AJAX y JQuery, etc., y creo que se puede crear una barra de progreso de carga con PHP, AJAX y Javascript, etc.

Estoy sorprendido de cómo obtener el tamaño de la carga (es decir, cada segundo que quiero saber, cuánto del archivo se carga y cuánto queda, creo que debería ser posible utilizar AJAX, etc.) durante la carga.

Aquí hay un enlace al manual de PHP pero no entendí eso: http://php.net/manual/en/session.upload-progress.php

¿Hay algún otro método para mostrar la barra de progreso de carga usando PHP y AJAX pero sin usar ninguna extensión externa de PHP? No tengo acceso a php.ini

Answer 1

Introducción

El PHP Doc es muy detallado que dice

El progreso de la carga estará disponible en la $ _SESSION superglobal cuando haya una carga en curso, y cuando la POST se coloque en una variable del mismo nombre que la configuración INI session.upload_progress.name está establecida en. Cuando PHP detecta dichas solicitudes POST, llenará una matriz en $ _SESSION, donde el índice es un valor concatenado de las opciones INI session.upload_progress.prefix y session.upload_progress.name. La clave se recupera normalmente leyendo estos ajustes INI, es decir,

Toda la información que necesita está lista en la sesión de nombres de PHP

• hora de inicio
• largancia de contenido
• bytes_proceso
• Información de archivo (Soporta múltiples)

Todo lo que necesita es extraer esta información y mostrarla en su formulario HTML.

Ejemplo básico

a.html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
var intval = null;
var percentage = 0 ;
function startMonitor() {
$.getJSON(''b.php'',
function (data) {
if (data) {
percentage = Math.round((data.bytes_processed / data.content_length) * 100);
$("#progressbar").progressbar({value: percentage});
$(''#progress-txt'').html(''Uploading '' + percentage + ''%'');
}
if(!data || percentage == 100){
$(''#progress-txt'').html(''Complete'');
stopInterval();
}
});
}
function startInterval() {
if (intval == null) {
intval = window.setInterval(function () {startMonitor()}, 200)
} else {
stopInterval()
}
}
function stopInterval() {
if (intval != null) {
window.clearInterval(intval)
intval = null;
$("#progressbar").hide();
$(''#progress-txt'').html(''Complete'');
}
}
startInterval();
</script>

b.php

session_start();
header(''Content-type: application/json'');
echo json_encode($_SESSION["upload_progress_upload"]);

Ejemplo con el progreso de carga de sesión de PHP

Aquí hay una versión mejor optimizada de PHP Session Upload Progress

JavaScript

$(''#fileupload'').bind(''fileuploadsend'', function (e, data) {
// This feature is only useful for browsers which rely on the iframe transport:
if (data.dataType.substr(0, 6) === ''iframe'') {
// Set PHP''s session.upload_progress.name value:
var progressObj = {
name: ''PHP_SESSION_UPLOAD_PROGRESS'',
value: (new Date()).getTime() // pseudo unique ID
};
data.formData.push(progressObj);
// Start the progress polling:
data.context.data(''interval'', setInterval(function () {
$.get(''progress.php'', $.param([progressObj]), function (result) {
// Trigger a fileupload progress event,
// using the result as progress data:
e = document.createEvent(''Event'');
e.initEvent(''progress'', false, true);
$.extend(e, result);
$(''#fileupload'').data(''fileupload'')._onProgress(e, data);
}, ''json'');
}, 1000)); // poll every second
}
}).bind(''fileuploadalways'', function (e, data) {
clearInterval(data.context.data(''interval''));
});

progress.php

$s = $_SESSION[''upload_progress_''.intval($_GET[''PHP_SESSION_UPLOAD_PROGRESS''])];
$progress = array(
''lengthComputable'' => true,
''loaded'' => $s[''bytes_processed''],
''total'' => $s[''content_length'']
);
echo json_encode($progress);

Otros ejemplos

• Seguimiento del progreso de carga con PHP y JavaScript
• PHP-5.4-Upload-Progress-Example

Answer 2

En primer lugar, asegúrese de tener PHP 5.4 instalado en su máquina. No etiquetaste php-5.4 así que no lo sé. Compruebe llamando a echo phpversion(); (o php -v desde la línea de comando).

De todos modos, asumiendo que tiene la versión correcta, debe poder establecer los valores correctos en el archivo php.ini . Ya que dices que no puedes hacer eso, no vale la pena lanzar una explicación sobre cómo hacerlo.

Como solución alternativa, utilice un cargador de objetos Flash.

Answer 3

Puedo sugerirte FileDrop .

Lo usé para hacer una barra de progreso, y es bastante fácil.

El único inconveniente que encontré, es que algunos problemas al trabajar con grandes cantidades de datos, ya que parece que no se pueden borrar los archivos antiguos, se pueden arreglar manualmente.

No está escrito como JQuery, pero es bastante bueno de todos modos, y el autor responde las preguntas bastante rápido.

Answer 4

Si bien puede ser divertido escribir el código para una barra de progreso, ¿por qué no elegir una implementación existente? Andrew Valums escribió una excelente y la puedes encontrar aquí:

http://fineuploader.com/

Lo uso en todos mis proyectos y funciona a la perfección.

Answer 5

XMLHTTPREQUSET2

var xhr = new XMLHttpRequest();
xhr.open(''GET'', ''video.avi'', true);
xhr.responseType = ''blob'';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
/*
var img = document.createElement(''img'');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // Clean up after yourself.
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
/*...*/
}
};
xhr.addEventListener("progress", updateProgress, false);
xhr.send();
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
console.log(percentComplete)
} else {
// Unable to compute progress information since the total size is unknown
}
}

Answer 6

Este es mi código está funcionando bien Pruébalo:

URL de demostración

http://codesolution.in/dev/jQuery/file_upload_with_progressbar/

Intenta esto debajo del código: -

este es mi código html

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $(''.bar'');
var percent = $(''.percent'');
var status = $(''#status'');
$(''form'').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = ''0%'';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + ''%'';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
</script>
</body>
</html>

Mi código de archivo upload.php

<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES[''uploadedfile''][''name'']);
if(move_uploaded_file($_FILES[''uploadedfile''][''tmp_name''], $target_path)) {
echo "The file ". basename( $_FILES[''uploadedfile''][''name'']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>