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

Question

在 iPhone 上使用 Dropzone 上传照片时，点击 Dropzone 元素时会打开上传对话框，但只有大约 5 次中有 1 次插入图像。此问题在 Chrome 和 iPhone 上的 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);
    })
  }

});

开发控制台每次都显示 "Dropbox Initialized" 消息。 "File Added" 消息不显示，除非它有效。两种情况都不会引发错误。

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

JSFiddle here.

Answer 1

通过将 clickable: '.dropbox *' 行更改为 clickable: '.dropbox'，删除通配符选择器，我解决了这个问题。

看起来 JavaScript 无法确定 'click' 事件在 iOS 设备上的起源位置，因此 Dropzone 对象事件侦听器不会收到正确的事件，除非点按了 HTML 元素的右侧部分。

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

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

Uploading photos using dropzone.js working 1/5 times on iPhone

javascript

iphone

ios

dropzone.js