使用JS一键上传文件

Question

我正在尝试一键上传文件。

我可以选择文件，但无法一键将其上传到服务器上的特定位置。其余部分需要帮助。

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>

我很抱歉。我对此比较陌生，并且感觉自己的方式。您能提供的任何帮助将不胜感激。谢谢。

Answer 1

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

Answer 2

我会从这样的事情开始。您不需要一堆 javascript 来使一个按钮以编程方式单击另一个按钮。让一些聪明的 css 完成所有的提升。（我已经用解释注释了 css，但如果有任何需要澄清的地方，我很乐意详细说明。）这个片段让你到达一个点，文件输入的更改会触发你的函数，并且你有一个对输入的引用，并通过扩展它的文件和表单。从那里做任何你需要做的事情。function handleFileChange ({target}) {&nbsp; if (target.files.length) {&nbsp; &nbsp; // do something with the form.&nbsp; &nbsp; // target.form.submit() or whatever&nbsp; &nbsp; console.log(target.files);&nbsp; }}const fileInput = document.querySelector('input');fileInput.addEventListener('change', handleFileChange);form {&nbsp; /* provides positioning context for the file input (below) */&nbsp; position: relative;&nbsp;&nbsp;&nbsp; /* purely cosmetic */&nbsp; background: #0099ff;&nbsp; color: white;&nbsp; font-weight: bold;&nbsp; font-size: 3rem;}form div {&nbsp; /* purely cosmetic */&nbsp; padding: 3rem;&nbsp; text-align: center;&nbsp; font-family: sans-serif;&nbsp;&nbsp;&nbsp; /*&nbsp; allows clicks to pass through the text&nbsp; element and hit the file input instead&nbsp; */&nbsp; pointer-events: none;}input[type=file] {&nbsp; /* hides the file input while leaving it clickable */&nbsp; opacity: 0;&nbsp;&nbsp;&nbsp; /*&nbsp; &nbsp;positions the file input to occupy the entire&nbsp; &nbsp;container, so no matter where you click it triggers&nbsp; &nbsp;the file chooser&nbsp; */&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; width: 100%;}<form>&nbsp; <input type="file" name="some-file" />&nbsp; <div>Upload a file</div></form>