以编程方式触发“选择文件”对话框

Question

我有一个隐藏的文件输入元素。是否可以从按钮的点击事件中触发其选择文件对话框？

Answer 1

如果您希望拥有自己的按钮来上传文件而不是使用<input type="file" />，您可以执行以下操作：

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

请注意，我使用了visibility: hidden，而不是display: none。您不能在未显示的文件输入上调用 click 事件。

Answer 2

这里的大多数答案都缺少有用的信息：

是的，您可以使用 jQuery/JavaScript 以编程方式单击输入元素，但前提是您在属于由用户启动的事件的事件处理程序中执行此操作！

因此，例如，如果您（脚本）以编程方式单击 ajax 回调中的按钮，则不会发生任何事情，但如果您将同一行代码放入用户引发的事件处理程序中，它将起作用。

附： debugger; 关键字如果在程序点击之前会中断浏览窗口......至少在 chrome 33 中......

Answer 3

仅作记录，有一个不需要 javascript 的替代解决方案。这有点像 hack，利用了点击标签将焦点设置在相关输入上的事实。

你需要一个<label> 和一个正确的for 属性（指向输入），可选地样式像一个按钮（使用引导程序，使用btn btn-default）。当用户点击标签时，对话框打开，例如：

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

Answer 4

我不确定浏览器如何处理对 type="file" 元素的点击（安全问题和所有问题），但这应该可以：

$('input[type="file"]').click();

我在 Chrome、Firefox 和 Opera 中测试了 this JSFiddle，它们都显示了文件浏览对话框。

Answer 5

我将input[type=file] 包装在标签标签中，然后根据自己的喜好设置label 的样式，并隐藏input。

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

纯 CSS 解决方案。

Answer 6

如今，像这样的混合解决方案可以获得最佳体验，

let fileHandle;
async function fileOpen() {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    console.log(await file.text());
}
// The advantage of this is fileHandle can be used to save to
// the opened file itself later, read more on this in https://web.dev/file-system-access/


// in April 2021, window.showOpenFilePicker still not support in Safari
// so one should have this around also
function legacyFileOpen() {
    var input = document.createElement('input');
    input.type = 'file';
    input.onchange = function () {
        input.files[0].arrayBuffer().then(function (arrayBuffer) {
            console.log(new TextDecoder().decode(arrayBuffer));
        });
    }
    input.click();
}

Answer 7

不幸的是，本来唯一的方法是创建一个<input type="file"> 元素，然后模拟点击。

有一个小插件（无耻插件）可以消除一直这样做的痛苦：file-dialog

fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })

Answer 8

最好的解决方案，适用于所有浏览器......甚至在移动设备上。

<div class="btn" id="s_photo">Upload</div>

<input type="file" name="s_file" id="s_file" style="opacity: 0;">';

<!--jquery-->

<script>
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
</script>

隐藏输入文件类型会导致浏览器出现问题，不透明度是最好的解决方案，因为它不会隐藏，只是不显示。 :)

Answer 9

出于安全原因，没有跨浏览器的方法。人们通常做的是将输入文件覆盖在其他东西上并将其可见性设置为隐藏，以便它自己触发。 More info here.

Answer 10

确保您在 REACT 中使用绑定来获取组件道具

class FileUploader extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
   onChange=(e,props)=>{
    const files = e.target.files;
    const selectedFile = files[0];
    ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
  }
   handleClick = () => {
    this.refs.fileUploader.click();
  }
  render()
  {
  return(
      <div>
        <button type="button" onClick={this.handleClick}>Select File</button>  
        <input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
      </div>)
  }
}

Answer 11

以编程方式浏览文件

function browseFile(accept) {
    const promise = resolvingPromise();
    const input = document.createElement('input');
    input.type = "file";
    input.accept = accept;
    input.onchange = function (e) {
        const files = e.target.files;
        promise.resolve(files);
    }
    setTimeout(function () {
        click(input);
    }, 0);
    return promise;
}

function click(node) {
    try {
        node.dispatchEvent(new MouseEvent('click'))
    } catch (e) {
        const evt = document.createEvent('MouseEvents')
        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null)
        node.dispatchEvent(evt);
    }
}

Answer 12

使用jQuery你可以调用click()来模拟点击。

Answer 13

这对我有用：

$('#fileInput').val('');

Answer 14

对于那些想要相同但使用 React 的人

openFileInput = () => {
    this.fileInput.click()
}

---

<a href="#" onClick={this.openFileInput}>
    <p>Carregue sua foto de perfil</p>
    <img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>

Answer 15

<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
     <input id="myInput" type="file" />
</form>
<script>
  const uploadButton = document.getElementById('uploadButton');
  const myInput = document.getElementById('myInput');

  uploadButton.addEventListener('click', () => {
    myInput.click();
  });
</script>