php和jquery進度條

我有一種形式，並在那種形式我有輸入類型文件上傳zip文件我上傳使用該形式的zip文件，並比它去壓縮提取php文件，但我想顯示加載器，直到文件提取。如何使用php或jquery？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>

來源

2013-12-12 Vishal

您可以使用jQuery UI。在這裏你可以檢查它http://jqueryui.com/progressbar/#default

來源

2013-12-12 13:10:59 berzins92

顯示基於百分比的進度條是棘手的工作。如果您對此主題的瞭解有限，則顯示裝載狀態或旋轉圖標會更好。

不是最漂亮的方法，但爲我和其他許多人創造了奇蹟。

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），您不需要任何外部庫或插件即可使用它。此外，這是非常簡單和可以理解的。

ANOTHER OPTION ------------------------------------------- -

更高級一點，包含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!"; 
} 
?>

來源

2013-12-12 13:29:57 TheCarver

php和jquery進度條

回答

相關問題