仅需要几行JS代码即可成功触发

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 // 文件的名称（包括扩展名）
file.size // 以字节为单位的大小
file.type // 文件类型，例如“application/pdf”

但是,如果我们需要文件的内容怎么办？

为了获得文件的实际内容,出于各种原因.放置图像,加载到画布,使用Base64数据URL创建窗口等,我们需要使用 FileReader API

我们将创建FileReader的一个实例,并加载我们用户选择的文件引用.

var input = document.createElement('input');
input.type = 'file';

input.onchange = e => { 

   // 获取文件
   var file = e.target.files[0]; 

   // 设置reader
   var reader = new FileReader();
   reader.readAsText(file,'UTF-8');

   // 获取完成后
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // 文件的内容
      console.log( content );
   }

}

input.click();

示例-获取本地图片的路径并设置为背景图片

var input = document.createElement('input');
input.type = 'file';

input.onchange = e => { 

   // 获取文件引用
   var file = e.target.files[0]; 

   // setting up the reader
   var reader = new FileReader();
   reader.readAsDataURL(file); // 这是作为数据url读取的

   // 获取完成后
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // 这是内容!
      document.querySelector('#content').style.backgroundImage = 'url('+ content +')';
   }

}

input.click();