如何使一个功能，将触发下载特定的文件，用户输入特定的密钥?

Question

我已经制作了一个文本框和一个按钮。现在有人能帮我做一个函数吗?

我希望用户输入一个特定的字母数字键，将由网站以其他方式给出结束。它将是字母数字。用户必须在文本框中输入密钥，然后单击按钮下载只有字母数字密钥才能访问的特定文件。然后，如果密钥与特定文件匹配，它将被下载。也会有很多其他文件，但是有一个匹配的密钥将被下载。请帮帮我……

我的代码:

<center>
<input class="keyBox" type="text" placeholder="Enter your download key">
<br><br>
<div class="text-center">
<button type="submit" class="btn btn-style btn-primary">Download</button>
</div>
</button>
</center>

Answer 1

我不知道您的确切需求，但这应该可以工作，假设您有一个带有API端点的服务器，该端点将键作为查询参数。(根据需要调整生成的URL)

<!-- Add this after the HTML in your question -->
<script>
function onClick(event) {
// You should change the button's type to "button".
// Then you won't need this line.
event.preventDefault()
const inputElement = document.querySelector('input')
const filename = inputElement.value
location.href = `/path/to/${filename}`
}
const button = document.querySelector('button')
button.addEventListener('click', onClick)
</script>

只要API端点返回正确的Content-Disposition标头，浏览器就应该尝试下载文件，而不是导航到URL。

您可能应该使用id属性，以便document.querySelector不会选择错误的元素。那么你可以用document.getElementById代替。