Я пытаюсь найти простой учебник, в котором рассказывается о том, как добавить процент прогресса к загрузке файла, я уже создал часть загрузки файла, поэтому мне не нужен плагин, который поставляется с обоими, я хочу быть способный самостоятельно кодировать индикатор выполнения, но мне нужна помощь в том, как это сделать. Я хочу узнать, как это работает, я не просто хочу, чтобы какой-то плагин делал все это для меня.
Любая помощь будет принята с благодарностью, спасибо!
Мне просто интересно, как получить процент загрузки файла, а не на самом экране выполнения. Я хочу иметь точный процент.
Смотри сюда:
http://jquery.malsup.com/form/progress.html
Попробуй это:-
это мой 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><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> мой 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!"; } ?>
Пожалуйста, взгляните, я думаю, вы найдете это полезным. Это jQuery, и это процент прогресса, как и вы, для вашего сценария загрузки!
Демо-версия jsFiddle
Если вы хотите изучить более сложный пример, есть надежный сценарий, который я бы рекомендовал,
Uber Uploader – это jQuery и PHP.