首页 文章

上传对话框会在我正在创建的网页上显示后立即消失

提问于
浏览 次
0

我正在尝试使用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>
javascript frameworks web-deployment

1 回答

  • 0

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

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

    表单中的默认按钮不起作用（它会导致问题中描述的问题） . 将按钮更改为 Span 有效（但对用户来说不直观） . 将表单更改为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>

    我还没有使用工作 endpoints （服务器）进行测试

    回复于

相关问题