Question

在iPhone上使用Dropzone进行照片上传时，点击Dropzone元素时会打开上传对话框，但只会插入图像大约5次中的1次。此问题发生在iPhone上的Chrome和Safari浏览器上，但不会发生在iPad，桌面设备或Android设备上。

HTML：

<div class='dropbox' id='dropbox'>
  <div class='dz-message dropbox-message'>
    <div class='icon'>
      <img src='icon.png' alt='Upload Icon' />
    </div>
    <div class='description'>Upload photo</div>
  </div>
</div>

JavaScript的：

$(document).ready(function() {
  function randomString(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
  }

  var cleanFilename = function(name) {
    var filename = name,
      extension = filename.split('.').pop(),
      random_string = randomString(28),
      new_file_name = random_string + '.' + extension;

    return new_file_name;
  };
  if ($('div#dropbox').length) {
    var profileImage = new Dropzone("div#dropbox", {
      url: "upload.php",
      paramName: "file", // The name that will be used to transfer the file
      clickable: '.dropbox *',
      acceptedFiles: 'image/*',
      resizeWidth: 600,
      maxFilesize: 10, // MB
      thumbnailWidth: 560,
      thumbnailHeight: 560,
      renameFilename: cleanFilename,
      maxFiles: 1,
      uploadMultiple: false,
      init: function() {
        console.log('Dropbox Initialized');
      }
    });
    profileImage.on('addedfile', function(file, errorMessage, xhr) {
      console.log("File Added");
      file.previewElement.addEventListener('click', function() {
        profileImage.removeFile(file);
      })
    })
    profileImage.on('error', function(file, errorMessage, xhr) {
      console.log(errorMessage + "\r\n" + file);
    })
  }

});

开发控制台显示＆＃34; Dropbox已初始化＆＃34;每次都有消息。＆＃34;文件已添加＆＃34;消息在其工作的情况下不会显示。两种情况都不会引发任何错误。

jQuery版本是3.1.1。 Dropzone版本是5.3.0。

JSFiddle here。

Answer 1

我能够通过将clickable: '.dropbox *'行更改为clickable: '.dropbox'，删除通配符选择器来解决此问题。

看起来JavaScript无法确定“点击”事件在iOS设备上的起源，因此Dropzone对象事件侦听器不会收到正确的事件，除非点击了HTML元素的正确部分。< / p>

我认为这与this issue有关，这导致我走上了正确的道路。

使用dropzone.js在iPhone上工作1/5次上传照片

1 个答案: