Question

我有一个小问题-我可以点击添加文件。只有dropzone不起作用。如果我将文件拖放到浏览器中，将显示该文件而不上传。

    $('#trigger-attachment').click(function(event) {
      if ($('#attachment-1').val() == '') {
        console.log('trigger 1')
        $('#attachment-1').click();
        $('.not-needed-if-pdf-provided').remove();
      } else if ($('#attachment-2').val() == '') {
        console.log('trigger 2')
        $('#attachment-2').click();
        $('.not-needed-if-pdf-provided').remove();
        console.log('trigger 2')
      } else if ($('#attachment-3').val() == '') {
        console.log('trigger 3')
        $('#attachment-3').click();
        $('.not-needed-if-pdf-provided').remove();
      } else {
        alert('Maximal 3 Dokumente auswählbar. Entfernen Sie zunächst eines um ein anderes auszuwählen. Tipp: Fügen Sie mehrere Dateien zu einem PDF zusammen.');
      }
    });
    $('#trigger-attachment').on('dragenter', function() { if ($('input.attachment.active').length > 0) $(this).addClass('dragging'); });
    $('#trigger-attachment').on('drop', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragleave', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragexit', function() { $(this).removeClass('dragging'); });
    $('#trigger-attachment').on('dragend', function() { $(this).removeClass('dragging'); });
    $('input.attachment').click(function(event) {
      event.stopImmediatePropagation();
      console.log('click ' + $(this).attr('id'));
    });
    $('input.attachment').change(function() {
      console.log('change');
      $(this).removeClass('active');
      var number = $(this).data('no');
      var displayElement =  $('#display-attachment-' + number);
      if ($(this).val() == "") {
        $(this).addClass('active');
        displayElement.empty();
      } else {
        var file = this.files[0];
        displayElement.html('<div onclick="$(\'#attachment-'+number+'\').val(\'\').addClass(\'active\');$(\'#display-attachment-'+number+'\').empty();">&times; '+file.name+'</div>');
      }
    });

####################这是HTML INPUT->

    <div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
        <div id="trigger-attachment" class="text-center">
          <img src="https://d17blcsvifkhsu.cloudfront.net/sites/5b056e1c85cde904fb840d8f/theme/images/share.svg?1540384342" style="max-width:40px;">
            <p class="green-label">
              (optional)<br>
            </p>
            <input class="attachment active" id="attachment-3" name="content[attachment_3]" data-no="3" type="file">
            <input class="attachment active" id="attachment-2" name="content[attachment_2]" data-no="2" type="file">
            <input class="attachment active" id="attachment-1" name="content[attachment_1]" data-no="1" type="file">
        </div>
        <div id="display-attachments">
            <div id="display-attachment-1" class="display-attachment"></div>
            <div id="display-attachment-2" class="display-attachment"></div>
            <div id="display-attachment-3" class="display-attachment"></div>
        </div>
    </div>

#####这个课程应该只隐藏另一个

    <div class="row pb-3 not-needed-if-pdf-provided">

Droparea不起作用，jQuery->拖放显示图像而不上传

0 个答案: