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

我可以通过Javascript从文件对话框中选择并上传本地图像文件吗？我正试图使用UserScript来实现这一点

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

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

performClick(document.getElementById('fld_images'))

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

提前感谢。

您需要使用文件输入，然后一旦您有了文件句柄，就可以使用fileReader访问文件。由于安全原因，JavaScript无法直接从用户驱动器中选择文件

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


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

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

---

请参阅：

如果您的文件字段可见，则代码应该可以工作。它可能不起作用，因为您已使文件字段不可见。答案是肯定的

尝试将上传字段设置为位置：绝对；顶部：-100px

HTML

CSS

---

也许你可以将你的图像文件转换成一个数据url，然后用JS来填充文件输入的值。仅当用户单击字段时，更改事件才会触发。问题是关于触发点击事件

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

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'));
});

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