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

【问题标题】：Uploading photos using dropzone.js working 1/5 times on iPhone使用 dropzone.js 上传照片在 iPhone 上工作 1/5 次
【发布时间】：2018-08-13 17:01:37
【问题描述】：

在 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);
    })
  }

});

开发控制台每次都显示“Dropbox Initialized”消息。 “文件已添加”消息不会显示，除非在它起作用的情况下。在这两种情况下都不会引发错误。

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

JSFiddle here.

【问题讨论】：

标签： javascript ios iphone dropzone.js

【解决方案1】：

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

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

我相信它与this issue 相关，这让我走上了正确的道路。

【讨论】：