php и jquery progress bar

У меня есть одна форма и в этой форме у меня есть файл входного типа для загрузки zip-файлов, и я загружаю zip-файл с использованием этой формы, а не в файл zip extract php, но я хочу показать загрузчик до файла extract.How я могу использовать php или jquery?php и jquery progress bar

<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), вам не нужны внешние библиотеки или плагины для его использования. Кроме того, это очень просто и понятно.

ДРУГОЙ ВАРИАНТ ------------------------------------------- -

Немного более продвинутый и включение библиотеки 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 progress bar

ответ

Смежные вопросы