Question

我正在尝试创建一个Browser Dialog，让用户将图片上传到我的网页。

我知道我必须使用<input type="file">但我不知道当用户接受click上button时出现的提示时，在哪里（或更好，何时）检索信息{1}}。

就我而言，当您click button时，会出现提示，我会通过Javascript处理此事件。

这是我的代码：

window.onload = function(){ 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function(){
    document.getElementById("file").click();
  }

  var files = document.getElementById('file').files[0]; //I do not know where to put this line
  alert(files);
};

#file{
  display: none;
}

<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>

当然，现在正在检索undefined，因为无论提示是否出现，我都会尝试检索它。如果我将该行放在onclick的{{1}}事件中，那么它还没有信息。我还试图为该文件创建一个button事件，但它也不会检索该信息，因为它不知道何时被接受。

所以我在这里有一些问题：

我应该在哪里放置此行以获取我上传的图片的值？
由于旧浏览器不支持输入过滤器，我是否也应该在服务器端检查它，对吧？
如果我想在服务器端（onclick）进行检查，是否要将其链接到表单？

提前致谢！

Answer 1

到目前为止，您已经掌握了一切，除非您不需要获取文件的价值，直到用户上传它们为止。否则，它肯定是未定义的。

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function(e){
     if (this.files && this.files[0]) {
        alert(JSON.stringify(this.files[0]));
     }
  };
};

1）你根本不应该把这一行放在onclick处理程序中。 2）您已经纠正了旧版浏览器无法检查的类型。无论你应该总是做服务器端验证。 3）除非您决定使用Web服务。

Answer 2

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function() {
    alert(file.files[0].name);
  };
};

#file{
  display: none;
}

<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>

如何用Javascript选择文件？

2 个答案: