Задать вопрос
@borodaguy

Как запустить эту форму у себя на сервере?

На сайте есть форма
<form id="online-checker" method="post" action="https://shattered.it/sample/submit"

и ajax
$.ajax({
        url: '/sample/submit',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,

Не могу понять, каким образом это работает. Если я хочу запустить эту форму у себя на сервере, выдает ошибку
  • Вопрос задан
  • 186 просмотров
Подписаться 1 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@link_irk
На какое событие вызывается ajax и вызывется ли вообще? Ошибку выдаёт веб-сервер или браузер? Какую ошибку?
Ответ написан
@borodaguy Автор вопроса
<form id="online-checker" method="post" action="https://shattered.it/sample/submit" enctype="multipart/form-data">
          <div class="upload-select">
            <span class="glyphicon glyphicon-upload"></span>
            <p class="text-center checker-banner">Drag some files here</p>
            <p class="text-center">Or, if you prefer..</p>
            <span class="btn btn-info upload-dragndrop"> Choose a file to upload</span>
            <input class="upload-file hide" type="file" name="file" id="file">
          </div>
          <div class="upload-inprogress hide">
            <div class="progress progress-striped active">
              <div class="progress-bar progress-bar-info" style="width: 0%;"></div>
            </div>
          </div>
          <div class="upload-success hide"></div>
          <div class="upload-error hide"> Upload failed. Please upload files under 100 MB.</div>
          <div class="btn btn-inverse reset-upload hide"> Reset</div>
        </form>

Выдает ошибку класса Upload-error hide, а именно "Upload failed. Please upload files under 100 MB"
Весь вайл upload.js выглядит следующий образом
// Google Analytics.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-92420390-1', 'auto');
ga('send', 'pageview');
// End of Google Analytics.


var $uploadForm = $('#online-checker');
var $toUpload = null;
var $data = null;

$('.upload-dragndrop').on('click', function(e) {
  $('.upload-file').click();
});

$('.upload-file').on('change', function(e) {
  $toUpload = e.target;
  if($toUpload) {
    $uploadForm.trigger('submit');
  }
});

$('.reset-upload').on('click', function(e) {
  $toUpload = null;
  $('.upload-select').removeClass('hide');
  $('.upload-inprogress').addClass('hide');
  $('.upload-error').addClass('hide');
  $('.upload-success').addClass('hide');
  $('.reset-upload').addClass('hide');
});

$uploadForm.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  })
  .on('dragover dragenter', function() {
    $uploadForm.addClass('upload-dragover');
  })
  .on('dragleave dragend drop', function() {
    $uploadForm.removeClass('upload-dragover');
  })
  .on('drop', function(e) {
    $toUpload = e.originalEvent.dataTransfer;
    $uploadForm.trigger('submit');
  })
  .on('submit', function(e) {
    if ($uploadForm.hasClass('upload-inprogress')) return false;
    // Update UI.
    $('.upload-select').addClass('hide');
    $('.upload-inprogress').removeClass('hide');
    $('.upload-error').addClass('hide');
    $('.upload-success').addClass('hide');
    $('.upload-success').html('');
    $('.reset-upload').addClass('hide');
    $(".progress-bar").width("0%");
    // Prepare submission.
    e.preventDefault();
    var formData = new FormData();
    if($toUpload.files.length) {
      $.each($toUpload.files, function(i, file) {
        ga('send', {
          hitType: 'event',
          eventCategory: 'File',
          eventAction: 'Upload',
          eventLabel: 'custom'
        });
        formData.append(file.name, file);
      });
    } else {
      formData.append('in-page-drag', $toUpload.getData('text/html'));
        ga('send', {
          hitType: 'event',
          eventCategory: 'File',
          eventAction: 'Upload',
          eventLabel: 'sample'
        });
    }
    $.ajax({
        url: '/sample/submit',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(evt) {
                    var percent = (evt.loaded / evt.total) * 100;
                    $(".progress-bar").width(percent + "%");
                }, false);
            }
            return xhr;
        },
        success: function(data) {
            $('.upload-select').addClass('hide');
            $('.upload-inprogress').addClass('hide');
            $('.upload-error').addClass('hide');
            $('.upload-success').removeClass('hide');
            $('.reset-upload').removeClass('hide');
            $toUpload = null;
            var safeFilesCount = 0;
            var unsafeFilesCount = 0;
            var errorFilesCount = 0;
            $.each(data, function(filename, result) {
              if(result.error) {
                errorFilesCount += 1;
              } else if(result.has_collision) {
                unsafeFilesCount += 1;
                var element = $('<p></p>').addClass('text-danger')
                      .text('Collision found in ');
                element.append($('<b></b>').text(filename));
                $('.upload-success').append(element);
              } else {
                safeFilesCount += 1;
              }
            });
            if(safeFilesCount > 0 && unsafeFilesCount == 0) {
                $('.upload-success').append(
                  $('<p></p>').addClass('text-success')
                      .text('All the ' + safeFilesCount + ' uploaded files are safe.'));
            } else if (safeFilesCount > 0) {
                $('.upload-success').append(
                  $('<p></p>').addClass('text-success')
                      .text('All the remaining ' + safeFilesCount + ' files are safe.'));

            }
            if(errorFilesCount) {
              $('.upload-success').append(
                  $('<p></p>').addClass('text-danger')
                  .text('Could not process ' + errorFilesCount + ' files.'));
            }

        },
        error: function(data) {
            $toUpload = null;
            $('.upload-select').addClass('hide');
            $('.upload-inprogress').addClass('hide');
            $('.upload-error').removeClass('hide');
            $('.upload-success').addClass('hide');
            $('.reset-upload').removeClass('hide');
        }},
        'json');
  });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы