php和jquery进度条

问题描述

我有一个表格，在该表格中，我有输入类型的文件来上传zip文件，我使用该表格上传了zip文件，然后去了zip提取php文件，但是我想显示加载程序直到文件提取出来.用php还是jquery做?

I have one form and in that form i have input type file to upload zip files i upload zip file using that form and than it goes to zip extract php file but i want to show loader till the file extract.How can i do using php or 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>

推荐答案

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

Showing a percentage based progress bar is tricky work. You're much better off displaying a loading status or a spinning icon if your knowledge on this subject is limited.

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

Not the prettiest of methods but has worked wonders for me and many others in the past.

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)后，该加载图标消失.这一切都无需重新加载页面即可完成.

When the form is submitted, a loading icon is displayed, and when the upload and extraction process has finished (iFrame loaded), the loading icon disappears. This all happens without reloading the page.

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

The bonus of using this is, if modified slightly (convert jQuery to Javascript) you don't need any external libraries or plugins to use it. Also, it is very simple and understandable.

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

更高级，并包含jQuery库&一个插件是必需的，但具有百分比功能.

A bit more advanced and inclusion of jQuery library & a plugin is required, but has the percentage feature.

签出 http://malsup.com/jquery/form/#file-upload 以获取文档和完整规范，并在此处进行演示: http://malsup.com/jquery/form/progress.html .

Check out http://malsup.com/jquery/form/#file-upload for documentation and full spec and here for demo: 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!";
}
?>

这篇关于php和jquery进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！