$('#id').click();
它无法在Mac OS上的Chrome 26上运行=（
问题实际上是创建“上传”小部件，可以集成在表单中。 小部件将由两部分组成。第一部分是带启动器按钮和错误/成功消息的div。 我认为这种方式是另一种形式作为文件输入的第二部分并将文件提交到iframe。在submition之后，我们在主要表单的第一部分中填充隐藏字段或在同一部分中显示错误。
简单的方法是将文件格式添加到主窗体中，但它是禁止的。
修复我。
答案 0 :(得分：89)
我会创建一个按钮和一个不可见的输入，如此
<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />
并添加一些jQuery来触发它：
$('#button').on('click', function() {
$('#file-input').trigger('click');
});
同样的想法，没有jQuery（归功于@Pascale）
<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />
答案 1 :(得分：37)
只需创建一个输入元素并触发点击。
var input = document.createElement('input');
input.type = 'file';
input.click();
这是最基本的，弹出一个选择文件对话框，但如果不处理所选文件，它就没用了......
在新创建的输入中添加onchange事件将允许我们在用户选择文件后执行操作。
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
var file = e.target.files[0];
}
input.click();
目前我们有文件变量存储各种信息：
file.name // the file's name including extension
file.size // the size in bytes
file.type // file type ex. 'application/pdf'
大！
为了获得文件的实际内容，出于各种原因。放置图像，加载到画布，创建一个包含Base64数据网址的窗口等，我们需要使用FileReader API
我们将创建FileReader的一个实例，并加载我们用户选择的文件引用。
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
// getting a hold of the file reference
var file = e.target.files[0];
// setting up the reader
var reader = new FileReader();
reader.readAsText(file,'UTF-8');
// here we tell the reader what to do when it's done reading...
reader.onload = readerEvent => {
var content = readerEvent.target.result; // this is the content!
console.log( content );
}
}
input.click();
尝试将上述代码粘贴到devtool的控制台窗口中，它应该生成一个select-a-file对话框，在选择文件后，控制台现在应该打印文件的内容。
让我们尝试创建一个文件选择对话框，将stackoverflows背景图像更改为更麻烦的东西......
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
// getting a hold of the file reference
var file = e.target.files[0];
// setting up the reader
var reader = new FileReader();
reader.readAsDataURL(file); // this is reading as data url
// here we tell the reader what to do when it's done reading...
reader.onload = readerEvent => {
var content = readerEvent.target.result; // this is the content!
document.querySelector('#content').style.backgroundImage = 'url('+ content +')';
}
}
input.click();
打开devtools，并将上面的代码粘贴到控制台窗口中，这应该弹出一个选择文件对话框，在选择图像时，stackoverflows内容框背景应该更改为所选图像。
干杯！
答案 2 :(得分：9)
仅限HTML：
<label>
<input type="file" name="input-name" style="display: none;" />
<span>Select file</span>
</label>
编辑：我没有在Blink中对此进行测试，它实际上不适用于<button>，但它应该适用于大多数其他元素 - 至少在最近的浏览器中。
使用上面的代码检查this fiddle。
答案 3 :(得分：8)
为了完整起见，纯JavaScript中的Ron van der Heijden's solution：
<button onclick="document.querySelector('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">
答案 4 :(得分：4)
扩大＆＃39; levi＆＃39;的回答。并显示如何从上传中获取响应，以便您可以处理文件上传：
selectFile(event) {
event.preventDefault();
file_input = document.createElement('input');
file_input.addEventListener("change", uploadFile, false);
file_input.type = 'file';
file_input.click();
},
uploadFile() {
let dataArray = new FormData();
dataArray.append('file', file_input.files[0]);
// Obviously, you can substitute with JQuery or whatever
axios.post('/your_super_special_url', dataArray).then(function() {
//
});
}
答案 5 :(得分：2)
准备使用功能（使用Promise）
/**
* Select file(s).
* @param {String} contentType The content type of files you wish to select. For instance "image/*" to select all kinds of images.
* @param {Boolean} multiple Indicates if the user can select multiples file.
* @returns {Promise<File|File[]>} A promise of a file or array of files in case the multiple parameter is true.
*/
function (contentType, multiple){
return new Promise(resolve => {
let input = document.createElement('input');
input.type = 'file';
input.multiple = multiple;
input.accept = contentType;
input.onchange = _ => {
let files = Array.from(input.files);
if (multiple)
resolve(files);
else
resolve(files[0]);
};
input.click();
});
}
测试
// Content wrapper element
let contentElement = document.getElementById("content");
// Button callback
async function onButtonClicked(){
let files = await selectFile("image/*", true);
contentElement.innerHTML = files.map(file => `<img src="${URL.createObjectURL(file)}" style="width: 100px; height: 100px;">`).join('');
}
// ---- function definition ----
function selectFile (contentType, multiple){
return new Promise(resolve => {
let input = document.createElement('input');
input.type = 'file';
input.multiple = multiple;
input.accept = contentType;
input.onchange = _ => {
let files = Array.from(input.files);
if (multiple)
resolve(files);
else
resolve(files[0]);
};
input.click();
});
}<button onclick="onButtonClicked()">Select images</button>
<div id="content"></div>
答案 6 :(得分：2)
function promptFile(contentType, multiple) {
var input = document.createElement("input");
input.type = "file";
input.multiple = multiple;
input.accept = contentType;
return new Promise(function(resolve) {
document.activeElement.onfocus = function() {
document.activeElement.onfocus = null;
setTimeout(resolve, 500);
};
input.onchange = function() {
var files = Array.from(input.files);
if (multiple)
return resolve(files);
resolve(files[0]);
};
input.click();
});
}
function promptFilename() {
promptFile().then(function(file) {
document.querySelector("span").innerText = file && file.name || "no file selected";
});
}<button onclick="promptFilename()">Open</button>
<span></span>
答案 7 :(得分：0)
首先声明一个变量来存储文件名 （以后使用）：
var myfiles = [];
打开文件对话框
$('#browseBtn').click(function() {
$('<input type="file" multiple>').on('change', function () {
myfiles = this.files; //save selected files to the array
console.log(myfiles); //show them on console
}).click();
});
我正在发布它，所以它可能会对某人有所帮助，因为互联网上没有明确的说明如何将文件名存储到数组中！
答案 8 :(得分：0)
使用jquery库
<button onclick="$('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">