Question

我正在尝试使用elninotech/uppload，因为它似乎可以满足我的要求（请给我一个可移植，易于使用，功能强大的文件上传按钮）。但是，当我单击按钮时，上传对话框就会出现并消失（在调试器中按暂停，然后再按按钮，然后单步执行。在第二步对话框中出现，在第三步对话框中消失）。

我在做什么错了？

<html>
  <body>
    <form class="profile">
      <button id="uploadButton">upload image</button>
    </form>
    <img id="profilePicImage"/>
  </body>
  <script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
  <script>
const profilePicture = new Uppload({
    value: "https://randomuser.me/api/portraits/men/17.jpg",
    bind: ["#profilePicImage"],
    call: ["form.profile button#uploadButton"],
    //endpoint: "https://example.com/upload_backend",
    allowedTypes: "image"
});

  </script>
</html>

Answer 1

我在他们的网站https://elninotech.github.io/uppload/上发现了一个非常复杂的示例，我花了一些时间进行调试并查看他们的代码。这是我发现的。

元素可以具有属性data-uppload-button来将其标记为上载按钮。我不知道该如何使用多个按钮。

表单中的默认按钮不起作用（这会导致问题中描述的问题）。将按钮更改为跨度是可行的（但对用户而言是不直观的）。将表格更改为div即可。将按钮类型更改为按钮即可。

来自git-hub问题跟踪器https://github.com/elninotech/uppload/issues/21#issuecomment-445997614

当您具有不带方法的HTML表单元素时，默认为GET。如果它内部有一个按钮，则该表单会假定它是一个提交按钮，因此在按下该按钮时会刷新页面。这意味着，如果您的按钮没有type =“ button”，则刷新页面。这意味着原始状态已还原，您看不到Uppload打开。这就是为什么在您不想提交页面的按钮上需要type =“ button”的原因。或者，您可以拥有一个event.preventDefault（），并在表单的onSubmit事件上返回false。

这是工作代码：

<html>
  <body>
    <form class="profile">
      <button type="button" id="uploadButton">upload image</button>
    </form>
    <img id="profilePicImage"/>
  </body>
  <script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
  <script>
const profilePicture = new Uppload({
    value: "https://randomuser.me/api/portraits/men/17.jpg",
    bind: ["#profilePicImage"],
    call: ["div.profile button#uploadButton"],
    //endpoint: "https://example.com/upload_backend",
    allowedTypes: "image",

    services: ["upload", "camera", "link"],
    crop: {
        startSize: [100,100, "%"]
    }
});

  </script>
</html>

我尚未在工作端点（服务器）上进行测试

在我创建的网页上，上传对话框消失后立即消失

1 个答案: