时间戳

首页 > 解决方案 > 获取文件可能以字符串形式提交

javascript - 获取文件可能以字符串形式提交

问题描述

所以我试图在提交时获取一个文件，但我得到了这个代码片段，它可以让它发生变化。老实说，我并不真正理解第一行以及它是如何转换的，但基本上我想把它变成一个我可以在点击提交时调用的函数，并且没有事件监听器，因为有时它不起作用，除非在 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 中是相对较新的绿色。

标签： javascript

解决方案

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

  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>

推荐阅读