Процесс загрузки

Macabre

23 апр 2015 г., 10:31

Wap Master

Всем привет, кто нибудь реализовывал на Джоне такую вещь чтобы при выгрузке файла на сайт отображалась инфа о том сколько осталось выгружаться?

Folour

23 апр 2015 г., 10:53

Think different

Когда-то делал такое
Вот набросок, думаю разберешься

<html>
  <head>
    <style>
          progress {
              display: block;
              background-color: #f3f3f3;
              border: 0;
              width: 400px;
              height: 20px;
              border-radius: 9px;
          }

          progress::-webkit-progress-bar {
              background-color: #f3f3f3;
              border-radius: 9px;
          }
          progress::-webkit-progress-value {
              background: #00c900;
              border-radius: 9px;
          }
          progress::-moz-progress-bar {
              background: #00c900;
              border-radius: 9px;
          }
          #progress-text:after {
              content: attr(data-progress);
              width: 400px;
              margin-top: -21px;
              font-weight: bold;
              color: #008800;
              text-align: center;
              display: block;
          }
          #result {
              display: none;
          }
          #label {
              padding: 6px;;
              background-color: #d3d3d3;
              border-radius: 9px;
          }
          input[type="file"] {
              display: none;
          }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://malsup.github.io/jquery.form.js"></script>
    <script>
        $(document).ready(function() {
            $('#file').on('change', function() {
                $('#form').submit();
            });
            $('#form').submit(function() {
                var progress = $('#progress');
                $(this).ajaxSubmit({
                    beforeSend: function() {
                        $('#result').fadeIn(1000);
                        $('#form').fadeOut(100);
                    },
                    uploadProgress: function(event, position, total, percent) {
                        progress.attr('value', percent);
                        $('#progress-text').attr('data-progress', function() {
                            if(percent == 100) {
                                return 'Файл загружен';
                            }
                            return percent+'%';
                        });
                    }
                });
                return false;
            });
        });
    </script>
  </head>
  <body>
    <form id="form" method="post" action="?" enctype="multipart/form-data">
      <input id="file" type="file" name="file" />
      <label for="file" id="label">Выберите файл...</label>
    </form>
    <div id="result">
      <progress max="100" value="100" id="progress"></progress>
      <div id="progress-text" data-progress="Файл загружен!"></div>
    </div>
  </body>
</html>

Macabre

4 мая 2015 г., 7:55

Wap Master

Спасибо, ток не могу правильно прописать код, пишу в шапке следующее:

echo'<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://malsup.github.io/jquery.form.js"></script>
    <script>';
        $(document).ready(function() {
            $('#file').on('change', function() {
                $('#form').submit();
            });
            $('#form').submit(function() {
                var progress = $('#progress');
                $(this).ajaxSubmit({
                    beforeSend: function() {
                        $('#result').fadeIn(1000);
                        $('#form').fadeOut(100);
                    },
                    uploadProgress: function(event, position, total, percent) {
                        progress.attr('value', percent);
                        $('#progress-text').attr('data-progress', function() {
                            if(percent == 100) {
                                return 'Файл загружен';
                            }
                            return percent+'%';
                        });
                    }
                });
                return false;
            });
        });
   echo' </script>';

Открывается белая страница...

Folour

4 мая 2015 г., 8:06

Изменено

Think different

Ну так в коде одинарные кавычки есть.
?>
Ту пиши хтмл
<?php