为了账号安全,请及时绑定邮箱和手机立即绑定

使用JS一键上传文件

使用JS一键上传文件

慕村225694 2022-06-05 11:01:24
我正在尝试一键上传文件。我可以选择文件,但无法一键将其上传到服务器上的特定位置。其余部分需要帮助。html:<form><input type="file" id="real-file" class="displaynone"/><button id="custom-button" class="button-input-3">Upload file</button></form>JS:<script type="text/javascript">const realFileBtn = document.getElementById("real-file");const customBtn = document.getElementById("custom-button");customBtn.addEventListener("click", function() {realFileBtn.click();});</script>我很抱歉。我对此比较陌生,并且感觉自己的方式。您能提供的任何帮助将不胜感激。谢谢。
查看完整描述

2 回答

?
米琪卡哇伊

TA贡献1998条经验 获得超6个赞

浏览器不允许 javascript 启动文件对话框。用户必须单击该按钮。这是一项安全预防措施,可防止欺骗用户执行此操作。



查看完整回答
反对 回复 2022-06-05
?
慕妹3146593

TA贡献1820条经验 获得超9个赞

我会从这样的事情开始。您不需要一堆 javascript 来使一个按钮以编程方式单击另一个按钮。让一些聪明的 css 完成所有的提升。(我已经用解释注释了 css,但如果有任何需要澄清的地方,我很乐意详细说明。)


这个片段让你到达一个点,文件输入的更改会触发你的函数,并且你有一个对输入的引用,并通过扩展它的文件和表单。从那里做任何你需要做的事情。


function handleFileChange ({target}) {

  if (target.files.length) {

    // do something with the form.

    // target.form.submit() or whatever

    console.log(target.files);

  }

}


const fileInput = document.querySelector('input');

fileInput.addEventListener('change', handleFileChange);

form {

  /* provides positioning context for the file input (below) */

  position: relative;

  

  /* purely cosmetic */

  background: #0099ff;

  color: white;

  font-weight: bold;

  font-size: 3rem;

}


form div {

  /* purely cosmetic */

  padding: 3rem;

  text-align: center;

  font-family: sans-serif;

  

  /*

  allows clicks to pass through the text

  element and hit the file input instead

  */

  pointer-events: none;

}


input[type=file] {

  /* hides the file input while leaving it clickable */

  opacity: 0;

  

  /*

   positions the file input to occupy the entire

   container, so no matter where you click it triggers

   the file chooser

  */

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

}

<form>

  <input type="file" name="some-file" />

  <div>Upload a file</div>

</form>


查看完整回答
反对 回复 2022-06-05
  • 2 回答
  • 0 关注
  • 130 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信