php和jquery进度条答案

【问题标题】：php and jquery progress barphp和jquery进度条
【发布时间】：2013-12-12 13:05:37
【问题描述】：

我有一个表格，在那个表格中我有输入类型文件来上传 zip 文件我使用该表格上传 zip 文件，然后它去 zip 提取 php 文件，但我想显示加载器直到文件提取。我怎么能用php还是jquery？

<form enctype="multipart/form-data" method="post" action="zip_upload.php">
 <label>Upload Zip File: </label> <input type="file" name="zip_file">
 <input type="submit" name="submit" value="Upload" class="upload" id="submitzip"> <br><br>
</form>

【问题讨论】：

标签： php jquery progress-bar loader

【解决方案1】：

显示基于百分比的进度条是一项棘手的工作。如果您对此主题的了解有限，最好显示加载状态或旋转图标。

不是最漂亮的方法，但在过去为我和其他许多人创造了奇迹。

CSS：

#uploadFrame {
    height:1px;
    width:1px;
    visibility:hidden;
}

HTML：

// hide this on your page somewhere. It's only 1x1 pixels, so should be simple.
<iframe src="zip_upload.php" name="uploadFrame" id="uploadFrame"></iframe>

// your upload form
<form enctype="multipart/form-data" method="post" action="zip_upload.php" target="uploadFrame">
    // form content
</form>

jQuery：

$(form).submit(function() {
    $('#loading-spinner').show();
});

$("#uploadFrame").load(function() {
    $('#loading-spinner').hide();
});

提交表单时，会显示一个加载图标，当上传和提取过程完成（已加载 iFrame）时，加载图标会消失。这一切都无需重新加载页面即可发生。

使用它的好处是，如果稍微修改（将 jQuery 转换为 Javascript），您不需要任何外部库或插件即可使用它。而且，它非常简单易懂。

另一个选项 ------------------------------------------ --

更高级一点，需要包含 jQuery 库和插件，但具有百分比功能。

查看http://malsup.com/jquery/form/#file-upload 以获取文档和完整规范，并在此处查看演示：http://malsup.com/jquery/form/progress.html。

代码如下：

<form action="zip-upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="zip_file">
    <input type="submit" value="Upload">
</form>

<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);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

在您的 PHP 页面上：

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

【讨论】：

【解决方案2】：

您可以使用 jQuery UI。这里可以查看http://jqueryui.com/progressbar/#default

【讨论】：