Question

我可以通过Javascript从文件对话框中选择并上传本地图像文件（我正在尝试使用UserScript来完成）吗？

我可以通过以下代码打开文件对话框：

function performClick(node) {
   var evt = document.createEvent("MouseEvents")
   evt.initEvent("click", true, false)
   node.dispatchEvent(evt)
}

performClick(document.getElementById('fld_images'))

但是上传呢？可能吗？也许HTML5？

提前致谢。

Answer 1

您需要使用文件输入，然后在获得文件句柄后，您可以使用fileReader访问该文件。由于安全性，JavaScript无法直接从用户的驱动器中选择文件。

<input type="file" id="fileInput" />


$('#fileInput').on('change', function() {
    alert(this.files)
})

this.file[0]将是您的第一个文件。

请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript#Dealing_with_binary_data

Answer 2

如果您的文件字段可见，则您的代码应该有效。它可能不起作用，因为您已使文件字段不可见。在https://stackoverflow.com/users/56449/adardesign

的答案中归功于https://stackoverflow.com/a/7302101/227299

尝试将上传字段设置为position:absolute; top:-100px http://jsfiddle.net/DSARd/967/

<强> HTML

<input type="file" id="fld_images">
<button id="button">Upload</button>

<强> JS

function performClick(node) {
   var evt = document.createEvent("MouseEvents");
   evt.initEvent("click", true, false);
   node.dispatchEvent(evt, true);
}
document.getElementById('button').addEventListener('click', function(){
    performClick(document.getElementById('fld_images'));
});

<强> CSS

#fld_images{ position:absolute; top:-100px; }

Answer 3

您仍然无法使用javascript或usercript自动选择文件。这将是一个巨大的安全漏洞，Greasemonkey，Tampermonkey等的开发人员已经看不出制作这样做的API了。

您可以做的最多是：一旦用户手动选择文件（或使用拖放），您就可以使用the FileReader API自动解析它。

如何通过Javascript从文件对话框中选择和上传本地图像文件

3 个答案: