在表单提交中获取可能的字符串文件

Question

所以我试图在提交时获得一个文件，但我得到了这个代码片段，它可以在更改时获得。事实上，我并不真正理解第一行以及它是如何转换的，但基本上我想把它变成一个我可以在点击提交时调用的函数，而不需要事件监听器，因为有时它不起作用，除非在html表单上调用。

const fileSelector = document.querySelector('#a_pic');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
file = fileList[0];
pic_url = URL.createObjectURL(file);
alert(file)
document.querySelector('#secondcheck').innerHTML = '<img src = "' + pic_url + '">';
a_pic = file;
});

Html代码：

<form>
<input class= "form-control" type = "file" name= "a_pic" id= "a_pic" accept= "image/*">
<button type="button" value = "submit" name = "submit" id="submit" onclick = "whatever_the_newfunction_may_be()">submit</button>

请提供任何解释，因为我在javascript方面相对较新。

Answer 1

这很好用。有多种方法可以处理表单提交，但这里有一种方法，您不使用表单的提交事件，而只使用按钮的单击事件。

const fileSelector = document.querySelector('#a_pic');
let picBlobUrl;
fileSelector.addEventListener('input', (event) => {
const fileList = event.target.files;
file = fileList[0];
picBlobUrl = URL.createObjectURL(file);
});

function submitClicked() {
document.querySelector('#secondcheck').innerHTML = '<img src="' + picBlobUrl + '">';
}

<div>
<input class="form-control" type="file" name="a_pic" id="a_pic">
<button onclick="submitClicked()">submit</button>
</div>
<div id="secondcheck"></div>