来自JavaScript *的文件对话框，没有* <input />

Question

我正在向现有页面添加文件导入功能。

我想使用javascript并且不修改页面，即。没有添加“input type =”file“”标签，每个人似乎都在谈论。

我已经添加了按钮，现在我希望事件显示文件对话框，用户浏览文件和javascript将文件提交给服务器进行验证。

我该怎么做？ 顺便说一下，主要的优先事项是打开文件对话框，所以如果你不知道它就不需要用户或提交部件。

THX

Answer 1

好吧，如果我理解你想要的是什么，有点像这样......

<input type="button" value="Add File" onclick="document.getElementById('file').click()" />
<input type="file" id="file" style="display:none" />

隐藏file对象并使用其他对象调用文件对话框。对吗？

编辑：仅限Javascript

onclick="var f=document.createElement('input');f.style.display='none';f.type='file';f.name='file';document.getElementById('yourformhere').appendChild(f);f.click();"

使用id的{​​{1}}代替form !!将其放入您的对象中

Answer 2

这是一种不使用任何Javascript的方式，它也兼容所有浏览器，包括移动设备。

顺便说一下，在Safari中，input在隐藏display: none时被禁用。更好的方法是使用position: fixed; top: -100em。

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

如果您愿意，可以使用for中的label指向输入的id，以“正确方式”：< / p>

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Answer 3

对我有用：

export function pickFile(onFilePicked: (file: File) => void): void {
    const inputElemenet = document.createElement('input');
    inputElemenet.style.display = 'none';
    inputElemenet.type = 'file';

    inputElemenet.addEventListener('change', () => {
        if (inputElemenet.files) {
            onFilePicked(inputElemenet.files[0]);
        }
    });

    const teardown = () => {
        document.body.removeEventListener('focus', teardown, true);
        setTimeout(() => {
            document.body.removeChild(inputElemenet);
        }, 1000);
    }
    document.body.addEventListener('focus', teardown, true);

    document.body.appendChild(inputElemenet);
    inputElemenet.click();
}

然后：

pickFile((file: File) => {
    console.log(file);
})

Answer 4

我这样隐藏了我的第一个按钮

<input style="display:none;" type="file" id="file" name="file"/>

以下内容触发输入文件：

<i class="fa fa-camera-retro fa-3x" type="button" data-toggle="tooltip" title="Escoje tu foto de perfil" id="secondbutton" ></i>（我使用了一个图标）

触发我的第二个按钮：

$( "#secondbutton" ).click(function() {
        $( "#file" ).click();
});

来自http://api.jquery.com/click/