如何通过js打开选择文件对话框？

Question

$('#id').click();

它在Mac OS上的Chrome 26上不起作用=(

问题实际上是创建"上传"小部件,可以集成在表单中.小部件将由两部分组成.第一部分是带启动器按钮和错误/成功消息的div.我认为这种方式是另一种形式作为文件输入的第二部分并将文件提交到iframe.在提交之后,我们在主要表单的第一部分中填充隐藏字段或在同一部分中显示错误.

简单的方法是将文件格式添加到主窗体中,但它是禁止的.

整我.

Answer 1

使用jQuery

我会像这样创建一个按钮和一个不可见的输入

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

使用Vanilla JS

同样的想法,没有jQuery(@Pascale的信用)

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

Answer 2

仅限JS - 不需要jquery

只需创建一个输入元素并触发点击即可.

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数据URL创建窗口等,我们需要使用FileReaderAPI

我们将创建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对话框,在选择文件后,控制台现在应该打印文件的内容.

示例 - "Stackoverflow的新背景图像!"

让我们尝试创建一个文件选择对话框,将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内容框背景应该更改为所选的图像.

干杯!

Answer 3

准备使用功能（使用 Promise）

/**
 * Select file(s).
 * @param {String} contentType The content type of files you wish to select. For instance, use "image/*" to select all types of images.
 * @param {Boolean} multiple Indicates if the user can select multiple files.
 * @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();
    });
}

测试它

/**
 * Select file(s).
 * @param {String} contentType The content type of files you wish to select. For instance, use "image/*" to select all types of images.
 * @param {Boolean} multiple Indicates if the user can select multiple files.
 * @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();
    });
}

Answer 4

为了完整起见,Ron van der Heijden在纯JavaScript中的解决方案:

<button onclick="document.querySelector('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">

Answer 5

仅限HTML:

<label>
  <input type="file" name="input-name" style="display: none;" />
  <span>Select file</span>
</label>

编辑:我没有在WebKit中测试它,它实际上不适用于a <button>,但它应该适用于大多数其他元素 - 至少在最近的浏览器中(不确定旧的).

用上面的代码检查这个小提琴.

Answer 6

要扩展“ levi”的答案并显示如何从上传中获取响应，以便您可以处理文件上传：

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() {
        //
    });
}

Answer 7

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>