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

问题描述 投票：0回答：11
$('#id').click();

它不适用于 Mac OS 上的 Chrome 26。

问题实际上是创建可以集成到表单中的“上传”小部件。 Widget 将由两部分组成。第一部分是带有启动器按钮和错误/成功消息的 div。 我认为方法是将另一个表单作为文件输入的第二部分并将文件提交到 iframe 中。提交后，我们在主表单的第一部分中填写隐藏字段或在其中显示错误。

简单的方法是在主窗体中添加文件窗体，但这是禁止的。

javascript jquery html
11个回答
274
投票

仅 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 创建窗口等。我们需要使用 

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();

尝试将上述代码粘贴到开发工具的控制台窗口中，它应该会生成一个选择文件对话框，选择文件后，控制台现在应该打印文件的内容。

示例 - “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 内容框背景应更改为所选图像。

190
投票

使用 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;" />
31
投票

即用型功能（使用 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 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();
    });
}

在这里尝试一下

// 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>

16
投票

仅在 HTML 中：

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

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

14
投票

为了完整起见，Ron van der Heijden 的纯 JavaScript 解决方案：

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

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

1
投票

首先声明一个变量来存储文件名（稍后使用它们）：

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

我正在发布它，所以它可能会对某人有所帮助，因为互联网上没有明确的说明如何将文件名存储到数组中！

0
投票

带有jquery库

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

这个问题让我很困惑。添加 addeventlistener 调用了我不想要的事件。如果您对简单的选择器感兴趣，则不需要事件。输入/文件对话框将从单独的窗口返回到具有所选文件名的调用者（如果您在调试器中查看该元素，“文件”对象还带有一些其他属性。感谢 user4602228 指明方向...

简单的输入/输出文件选择器如下所示>>>

function loadsettings()
//
// use web page dialog to get user settings file
//
{
   var setload=parent.settings.document.createElement("input");
   setload.type="file";
   setload.click();
   settings(*setload.files[0]*,false,false); //these are custom parameters 
}
return;
0
投票

看一下： window.showSaveFilePicker()

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.