我想在我的脚本中添加一个进度条。 我清理过很多东西的小程序只用两个文件构成：
的index.php
<!doctype html>
<html>
<head><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">
</form>
</body>
</html>
upload_file.php
<?php
$userfile_tmp = $_FILES['userfile']['tmp_name'];
$userfile_name = $_FILES['userfile']['name'];
if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {
header('Location: index.php');
}else{
header('Location: index.php');
}
?>
我阅读了讨论，乍一看我的案例需要什么，但部分代码是不可理解的，最重要的是不起作用。 确切地说，我有这些问题：
1.因为在server_side.php中创建了一个变量，它汇总了GET变量之前的所有整数。 $ sum的功能是什么？
2.为什么我的代码不起作用？
谢谢
的index.php
<!doctype html>
<html>
<head>
<script>
function myTimer()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("percentageDiv").innerHTML=xmlhttp.response;
alert(xmlhttp.response);
}
}
xmlhttp.open("GET","getter.php",true);
xmlhttp.send();
}
function loop(){
var loop_index = document.getElementById("loop_nr").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sumDiv").innerHTML="Total sum = " + xmlhttp.response;
clearInterval(myVar);
}
}
xmlhttp.open("GET","server_side.php?nr="+loop_index,true);
xmlhttp.send();
var myVar=setInterval(function(){myTimer()},1000);
}
var timer;
//try to delete duplications. Do a generic function that does the request to php
function makeRequest(toPHP, callback) {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback(xmlhttp.response);
}
}
xmlhttp.open("GET",toPHP,true);
xmlhttp.send();
}
function loop() {
var loop_index = document.getElementById("loop_nr").value;
makeRequest("server_side.php?nr="+loop_index, function(response) {
document.getElementById("sumDiv").innerHTML="Total sum = " + response;
clearInterval(timer);
});
timer=setInterval(makeRequest("getter.php", function(response) {
document.getElementById("percentageDiv").innerHTML=response;
}),1000);
}
</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">
</form>
<div id="percentageDiv"> Percentage div</div>
<div id="sumDiv"></div>
<form enctype="multipart/form-data" method="GET">
<input type="text" id="loop_nr">
<input type="submit" onclick="loop()">
</form>
</body>
</html>
server_side.php
<?php session_start(); // Avvio una sessione per creare la variabile 'progress'.
// Questa funzione scrive la somma di tutti gli interi precedenti ad $nr
// si salva anche in $_SESSION['progress'] il valore 'nr'
function sum($nr) {
$progress = 0 ;
$sum = 0 ;
for ($i = 1; $i <= $nr; $i++) {
$sum = $sum + $i;
$progress++;
$_SESSION['progress'] = $progress;
}
echo $sum;
}
// Se esiste la variabile 'nr' salvo in $result l'output sum($_GET['nr'])
if(isset($_GET['nr'])) {
// La variabile 'nr' sta arrivando quindi eseguo sum() e salvo tutto in $result
$result = sum($_GET['nr']);
}
getter.php
<?php
session_start(); // Si avvia una sessione per scrivere $_SESSION['progress']
$progress = $_SESSION['progress'];
echo $progress; // Si visualizza $_SESSION['progress']
?>
upload_file.php
<?php
$userfile_tmp = $_FILES['userfile']['tmp_name'];
$userfile_name = $_FILES['userfile']['name'];
if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {
header('Location: index.php');
}else{
header('Location: index.php');
}
?>
下面这个脚本在我看来更加现代，因为它使用了jQuery。它应该与不同的浏览器更兼容。 我已经测试了我服务器上的文件，但它不起作用。我哪里错了？
的index.php
<!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>
upload_file.php
<?php
$userfile_tmp = $_FILES['userfile']['tmp_name'];
$userfile_name = $_FILES['userfile']['name'];
if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {
header('Location: index.php');
}else{
header('Location: index.php');
}
?>