文件上传器适用于电脑，但不适用于移动设备

Question

我已经在我的网站中编写了一个文件上传器，当在计算机上使用并上传文件时，它可以完美地工作。但是当我在 iPhone 上访问该网站时，我无法上传任何内容。出现了选择上传内容的功能，但它不上传任何内容。文件上传后，应该会显示“已上传！”。有谁知道可能是什么问题吗？

网站网址是 - https://laundryday.nyc/partner.html#partnershipagreement

document.addEventListener("DOMContentLoaded", function() {
  const dropContainer = document.querySelector('.drop-container');
  const input = document.querySelector('.drop-container input');
  const maxFileSize = 5 * 1024 * 1024; // 5MB limit
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']; // Add allowed file types

  dropContainer.addEventListener('click', () => {
    input.click();
  });

  input.addEventListener('change', () => {
    const file = input.files[0];

    if (file) {
      if (!allowedTypes.includes(file.type)) {
        alert("Invalid file type. Only JPEG, PNG, and PDF files are allowed.");
        input.value = ""; // Clear the input
        dropContainer.querySelector('.drop-title').textContent = "Click to upload";
        return;
      }

      if (file.size > maxFileSize) {
        alert("File size exceeds 5MB. Please upload a smaller file.");
        input.value = ""; // Clear the input
        dropContainer.querySelector('.drop-title').textContent = "Click to upload";
        return;
      }

      dropContainer.querySelector('.drop-title').textContent = 'Uploaded!';
    }
  });
});

.drop-container {
  background-color: #f1f1f1;
  border: 2px dashed #7ba3b7;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
}

.drop-container input {
  display: none;
}

.drop-container:hover {
  background-color: #e1e1e1;
  transition: 1s;
}

.drop-title {
  font-size: 16px;
  text-align: center;
  color: #7ba3b7;
  font-weight: bold;
}

<section id="partnershipagreement" class="security section container">
  <div class="security__container grid">
    <div class="security__data">
      <h2 class="section__title-center">Partnership Agreement</h2>
      <p class="security__description">
        Download our partnership agreement and send back an executed copy via our submission portal below or through
        <a style="color: rgb(101, 174, 238);" href="mailto:[email protected]">our email.</a>
      </p>
      <br/>
      <a class="button" href="#about">Download</a>

      <br/><br/><br/><br/>

      <!-- New Document Submission Form -->
      <form id="document-upload-form" enctype="multipart/form-data" action="https://formsubmit.co/[email protected]" method="POST">
        <label class="drop-container">
                        <span class="drop-title">click to upload</span>
                        <input type="file" name="partnership agreement" required>
                      </label>
        <br/><br/><br/>
        <button class="button" style="border: none; font-size: 17px; cursor: pointer;" type="submit">Submit</button>
      </form>
    </div>

    <img class="svg__img svg__color" src="./assets/partnerassets/img/partnershipagreementpic.png">
  </div>
</section>

Answer 1

你的代码看起来或多或少还不错，但我有两个建议：

1. 在文件输入元素上使用

   accept

   属性，则只能选择该类型的文件。
2. 使用内置表单验证向用户显示消息。为了测试文件大小，您可以使用隐藏的输入元素，当您选择新文件时，该值会更新，并且

   max

   大小属性设置为给定值。

const maxFileSize = 5 * 1024 * 1024; // 5MB limit

document.addEventListener("DOMContentLoaded", function() {
  let form = document.getElementById('document-upload-form');
  form.filesize.max = maxFileSize;

  form.partnershipagreement.addEventListener('change', partnershipagreementChanged);
  form.filesize.addEventListener('invalid', filesizeInvalid, true);
});

function filesizeInvalid(e){
  e.preventDefault();
  let form = e.target.form;
  if(e.target.validity.rangeOverflow){
    form.querySelector('.message').textContent = e.target.dataset.rangeoverflow;
  }
}

function partnershipagreementChanged(e) {
  let form = e.target.form;
  let file = e.target.files[0];

  form.querySelector('.message').textContent = '';
  
  if (file) {
    form.filesize.value = file.size;
    let valid = form.reportValidity();
    if(valid){
      form.querySelector('.message').textContent = 'Uploaded!';
    }
  }
}

.drop-container {
  background-color: #f1f1f1;
  border: 2px dashed #7ba3b7;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
}

.drop-container input {
  display: none;
}

input[name="filesize"] {
  display: none;
}

.drop-container:hover {
  background-color: #e1e1e1;
  transition: 1s;
}

.drop-title {
  font-size: 16px;
  text-align: center;
  color: #7ba3b7;
  font-weight: bold;
}

<section id="partnershipagreement" class="security section container">
  <div class="security__container grid">
    <div class="security__data">
      <h2 class="section__title-center">Partnership Agreement</h2>
      <p class="security__description">
        Download our partnership agreement and send back an executed copy via our submission portal below or through
        <a style="color: rgb(101, 174, 238);" href="mailto:[email protected]">our email.</a>
      </p>
      <p><a class="button" href="#about">Download</a></p>

      <!-- New Document Submission Form -->
      <form id="document-upload-form" enctype="multipart/form-data" action="/formsubmit" method="POST">
        <label class="drop-container">
          <span class="drop-title">click to upload</span>
          <span class="message"></span>
          <input type="file" name="partnershipagreement" required accept="image/jpeg,image/png,application/pdf">
        </label>
        <input type="number" name="filesize" required data-rangeoverflow="File size exceeds 5MB. Please upload a smaller file.">
        <button class="button" style="border: none; font-size: 17px; cursor: pointer;" type="submit">Submit</button>
      </form>
    </div>
  </div>
</section>