Перетащите и оставьте загрузку, как автоматически отправить - PullRequest
Новая
       9

Перетащите и оставьте загрузку, как автоматически отправить

1 голос
/ 25 мая 2020

Я пытаюсь реализовать загрузчик перетаскиванием в новом шаблоне вложений для серии vBulletin 3.x. Я использовал все переменные в шаблоне по умолчанию, и все выглядит правильно, при наведении указателя мыши на него хорошо. но когда я отпускаю мышь на коробке, он не загружает файл.

Я включил весь код, который, по моему мнению, мог вызвать проблему. Я не могу понять, в чем проблема.

части этого кода удалены, предоставляя только те части, где, по моему мнению, проблема заключается в

форме: 

<form enctype="multipart/form-data" action="newattachment.php?do=manageattach&amp;p=$postid" id="manageAttachmentForm" name="newattachment" method="post">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="do" value="manageattach" />
<input type="hidden" name="t" value="$threadid" />
<input type="hidden" name="f" value="$forumid" />
<input type="hidden" name="p" value="$postid" />
<input type="hidden" name="poststarttime" value="$poststarttime" />
<input type="hidden" name="editpost" value="$editpost" />
<input type="hidden" name="posthash" value="$posthash" />

Зона перетаскивания: 

<div class="upload-container" id="uploadholder">
  <input type="hidden" name="MAX_FILE_SIZE" value="$inimaxattach">
  <div class="attachment-form">
    <div class="form-group"><label for="fileInput">Select files to upload</label></div>
    <input type="file" name="attachment[]" id="fileInput" multiple />
  </div>
  <div class="js-only">
  <p class="help-block prompt">
    <span class="banner-text">Drag files here to upload</span>
    <br>or<br>
    <button class="btn btn-lg btn-default" data-action="choose-files">Select Files</button>
  </p>
  <div id="uploadStatus" style="display: none;"><i class="fal fa-spinner fa-spin"></i> Uploading files. Please wait.</div>
  <p class="help-block prompt">Maximum upload file size: 20 MB.<br><a href="#" data-toggle="modal" data-target="#uploadInfo">What can I upload?</a></p>
  </div>
</div>

Кнопка отправки: 

<input type="submit" id="btnUpload" class="btn btn-lg btn-block btn-primary" name="upload" value="$vbphrase[upload]" onclick="return verify_upload(this.form);">
</form>

Js: 

<script>
$('form#manageAttachmentForm #fileInput').change( function(event) {
    $('<input />').attr('type', 'hidden')
              .attr('name', 'upload')
              .attr('value', '1')
              .appendTo('#manageAttachmentForm');
    $('form#manageAttachmentForm #uploadStatus').show();
    $('form#manageAttachmentForm').submit();
});

$('#uploadholder').on({
    'dragover dragenter': function(e) {
        $('#uploadholder .banner-text').text("Drop files here");
        $(this).addClass("holder-hover");
        e.preventDefault();
        e.stopPropagation();
    },
    'dragleave': function(e) {
        $('#uploadholder .banner-text').text("Drag files here to upload");
        $(this).removeClass("holder-hover");
    },
    'drop': function(e) {
        $('#uploadholder .banner-text').text("Drag files here to upload");
        $(this).removeClass("holder-hover");
        var dataTransfer =  e.originalEvent.dataTransfer;
        if( dataTransfer && dataTransfer.files.length) {
            fileInput.files = dataTransfer.files;
            e.preventDefault();
            e.stopPropagation();
        }
    }
});
</script>

Также я может загружать вложения вручную просто отлично. Но я не могу заставить работать перетаскивание.

Я думаю, что проблема может заключаться в этом бите Js, но все выглядит правильно.

...