时间戳

首页 > 解决方案 > 上传对话框在我正在创建的网页上出现后立即消失

javascript - 上传对话框在我正在创建的网页上出现后立即消失

问题描述

我正在尝试使用elninotech/uppload，因为它看起来会做我想做的事（给我一个便携、易于使用、功能强大的文件上传按钮）。但是，当我单击按钮时，上传对话框出现并消失（在调试器中按暂停，在按按钮之前，然后单步。在第 2 步对话框出现，在第 3 步消失）。

我究竟做错了什么？

<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>

标签： javascriptframeworksweb-deployment

解决方案

我在他们的网站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>

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

推荐阅读