javascript - 具有交叉浏览简单按钮外观的输入文件

Question

我必须创建一个按钮。如果用户点击所述按钮，则提示他选择要上传的文件。选择文件后，使用 Javascript 或 JQuery，我必须填写表格并提交，以便可以上传文件。

问题是我不能使用通常的 html

<input type="file" name="xml" class="custom-upload" id="custom-upload"/>

无论如何如何做到这一点？我已经彻底搜索过，所有可能的答案似乎都过于复杂，所以我认为我错过了一个更重要的解决方案。

Answer 1

您可以创建一个显示按钮图像的图像。然后单击该按钮，您可以触发实际文件输入的单击事件。

<img id="imageButton" src="soure/to/imagebutton.jpg" />
<input type="file" id="fileImageButton" style="display: none; " />

还有一点 jQuery 来解决问题

$("#imageButton").on('click', function() {
    $("#fileImageButton").trigger('click');
});

或者，香草 javascript

document.getElementById('imageButton').addEventListener('click', function() {
  fileinput = document.getElementById('fileImageButton');

  if (document.createEvent) {
    var evt = document.createEvent("MouseEvents")
    evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
    fileinput.dispatchEvent(evt);
  } else {
    element.fireEvent("onclick"); //For IE
  }
});