PHP Ajax上传进度条

IT技术 php javascript ajax upload progress-bar
2021-02-23 16:15:35 
<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);
}
?>

我非常了解 Javascript、AJAX 和 JQuery 等，我相信可以使用 PHP、AJAX 和 Javascript 等创建上传进度条。

我很惊讶如何获得上传的大小（意思是我想知道每一秒，上传了多少文件以及剩余多少，我认为应该可以使用 AJAX 等）上传过程中的文件。

这是 PHP 手册的链接，但我不明白：http : //php.net/manual/en/session.upload-progress.php

有没有其他方法可以使用 PHP 和 AJAX 显示上传进度条，但不使用 PHP 的任何外部扩展？我无权访问php.ini

6个回答

介绍

PHP Doc 说的非常详细

当上传正在进行时，上传进度将在 $_SESSION 超全局变量中可用，并且当发布与 session.upload_progress.name INI 设置相同名称的变量时。当 PHP 检测到此类 POST 请求时，它会在 $_SESSION 中填充一个数组，其中索引是 session.upload_progress.prefix 和 session.upload_progress.name INI 选项的连接值。通常通过读取这些 INI 设置来检索密钥，即

您需要的所有信息都已在 PHP 会话命名中准备就绪

  • 开始时间
  • 内容长度
  • bytes_processed
  • 文件信息（支持多个）

您所需要的只是提取此信息并将其显示在您的 HTML 表单中。

基本示例

一个.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"]);

PHP 会话上传进度示例

这是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'));
});

进度.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);

其他例子

对我不起作用。此外，链接已过时
2021-05-04 16:15:35

这是我的代码，它工作正常 试试看 ：

演示网址 （断开的链接）

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

试试下面的代码：

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>

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!";
}
?>
uploadProgress 不是 ajax 选项，但您可以使用它：stackoverflow.com/questions/42216409/...
2021-04-26 16:15:35

我可以建议你FileDrop。

我用它来制作进度条，这很容易。

我遇到的唯一缺点是处理大量数据时会出现一些问题，因为它似乎无法清除旧文件——可以手动修复。

不是用 JQuery 编写的，但无论如何它都非常好，而且作者回答问题的速度非常快。

虽然为进度条编写代码可能很有趣，但为什么不选择现有的实现。Andrew Valums 写了一篇很棒的文章，你可以在这里找到它：

http://fineuploader.com/

我在我所有的项目中都使用它，它就像一个魅力。

我知道这个答案很旧，所以请原谅我，但是您不必为fineuploader付费吗？
2021-04-24 16:15:35
源代码在 GNU GPL v3 许可证下可用：github.com/Widen/fine-uploader
2021-04-28 16:15:35
我也将它用于某些项目。像魅力一样工作。
2021-04-30 16:15:35

首先，确保您的机器上安装了 PHP 5.4。你没有标记所以我不知道。通过调用echo phpversion();（或php -v从命令行）进行检查。

无论如何，假设您拥有正确的版本，您必须能够在php.ini文件中设置正确的值。既然你说你不能这样做，我就不值得我开始解释如何去做。

作为后备解决方案，请使用 Flash 对象上传器。

我知道如何对 php.ini 进行更改，但问题是我无法访问 php.ini 并且我不想使用 Flash，甚至我也无法将 php 升级到最新版本。
2021-04-24 16:15:35
这些网站使用其他方法，通常基于 Flash。一些较新的浏览器支持一些关于文件的内容，但我对此知之甚少。
2021-05-03 16:15:35
如果您无法为此使用正确的 PHP 版本，请不要费心尝试让它工作。不会的，故事结束。此功能仅在最新的 PHP 版本中添加。
2021-05-04 16:15:35
我认为在 php 5.4 之前，除了 session.upload-progress 之外还有其他方法吗？许多网站都包含进度条
2021-05-04 16:15:35
其它你可能感兴趣的问题
上一篇如何将多个文件上传到 Firebase？ 下一篇HTML5 - 如何获取图像尺寸