blocks|key|1956019|text|如果你想用自己的按钮来上传文件，而不是使用<input+type="file"+/>，你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1956020|<input+id="myInput"+type="file"+style="visibility:hidden"+/>
<input+type="button"+value="Show+Dialog"+onclick="$('#myInput').click();"+/>|code-block|syntax|javascript|1956021|注意，我使用的是visibility:+hidden，而不是display:+none。不能对未显示的文件输入调用click事件。|1956022|entityMap^0|L|L|0|0|8|I|U|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>If you're looking to have your own button to upload a file instead of using <code>&lt;input type="file" /&gt;</code>, you can do something like:</p>

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

<p>Note that I used <code>visibility: hidden</code>, instead of <code>display: none</code>. You cannot call the click event on a non-displayed file input.</p>


blocks|key|1742865|text|仅供记录，还有一种不需要javascript的替代解决方案。这有点像黑客，利用了这样一个事实，即点击标签会将焦点设置在关联的输入上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1742866|您需要一个具有适当for属性(指向输入)的<label>，其样式可选地类似于一个按钮(对于bootstrap，使用btn+btn-default)。当用户单击标签时，对话框打开，例如：|offset|length|style|CODE|1742867|​|1742868|
<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"+rel="stylesheet"/>


<label+for="exampleInput"+class="btn+btn-default">
++Click+me
</label>
<input+type="file"+id="exampleInput"+style="display:+none"+/>|code-block|syntax|javascript|1742869|1742870|entityMap^0|0|9|3|L|7|1L|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|10|8|@]|9|@]|A|$M|N]]|$1|O|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|Q|$]]

<p>Just for the record, there is an alternative solution that does not require javascript. It is a bit of a hack, exploiting the fact that clicking on a label sets the focus on the associated input.</p>

<p>You need a <code>&lt;label&gt;</code> with a proper <code>for</code> attribute (points to the input), optionnaly styled like a button (with bootstrap, use <code>btn btn-default</code>). When the user clicks the label, the dialog opens, example :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- optionnal, to add a bit of style --&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;

&lt;!-- minimal setup --&gt;
&lt;label for="exampleInput" class="btn btn-default"&gt;
  Click me
&lt;/label&gt;
&lt;input type="file" id="exampleInput" style="display: none" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1742614|text|我不确定浏览器如何处理type="file"元素上的点击(安全问题等等)，但这应该是可行的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1742615|$('input[type="file"]').click();|code-block|syntax|javascript|1742616|我在Chrome，Firefox和Opera上测试过this+JSFiddle，它们都显示了文件浏览对话框。|1742617|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ebSS2/^0|B|B|0|0|Q|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>I'm not sure how browsers handle clicks on <code>type="file"</code> elements (security concerns and all), but this should work:</p>

<pre><code>$('input[type="file"]').click();
</code></pre>

<p>I've tested <a href="http://jsfiddle.net/ebSS2/" rel="noreferrer">this JSFiddle</a> in Chrome, Firefox and Opera and they all show the file browse dialog.</p>


blocks|key|1743155|text|我将input[type=file]包装在标签标记中，然后根据您的喜好设置label样式，并隐藏input。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1743156|<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>|code-block|syntax|javascript|1743157|纯CSS解决方案。|1743158|entityMap^0|2|G|11|5|1C|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I wrap the <code>input[type=file]</code> in a label tag, then style the <code>label</code> to your liking, and hide the <code>input</code>.</p>

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

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

<p>Purely CSS Solution. </p>


blocks|key|1956759|text|如今，像这样的混合解决方案可以获得最佳体验，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956760|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();
}|code-block|syntax|javascript|1956761|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nowadays a hybrid solution like this can be have the best experience,</p>
<pre><code>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();
}
</code></pre>


blocks|key|1742750|text|最好的解决方案，适用于所有浏览器。即使是在手机上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1742751|<div+class="btn"+id="s_photo">Upload</div>

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



<script>
++++$("#s_photo").click(function()+{
++++++++$("#s_file").trigger("click");
++++});
</script>|code-block|syntax|javascript|1742752|隐藏输入文件类型会导致浏览器出现问题，不透明是最好的解决方案，因为它不会隐藏，只是不会显示。:)|1742753|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The best solution, works in all browsers.. even on mobile.</p>

<pre><code>&lt;div class="btn" id="s_photo"&gt;Upload&lt;/div&gt;

&lt;input type="file" name="s_file" id="s_file" style="opacity: 0;"&gt;';

&lt;!--jquery--&gt;

&lt;script&gt;
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
&lt;/script&gt;
</code></pre>

<p>Hiding the input file type causes problems with browsers, opacity is the best solution because it isn't hiding, just not showing. :)</p>


blocks|key|1956357|text|不幸的是，本机唯一的方法是创建一个<input+type="file">元素，然后模拟单击。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1956358|有一个很小的插件(不知羞耻的插件)，它将消除必须一直这样做的痛苦：file-dialog|1956359|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
++++++++})
++++})|code-block|syntax|javascript|1956360|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/alnorris/file-dialog^0|H|J|0|X|B|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Natively the only way is by creating an <code>&lt;input type="file"&gt;</code> element and then simulating a click, unfortunately.</p>

<p>There's a tiny plugin (shameless plug) which will take the pain away of having to do this all the time: <a href="https://github.com/alnorris/file-dialog" rel="nofollow noreferrer">file-dialog</a> </p>

<pre><code>fileDialog()
    .then(file =&gt; {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

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


blocks|key|1742305|text|出于安全原因，没有跨浏览器的方法。人们通常做的是将输入文件覆盖在其他文件上，并将其可见性设置为隐藏，这样它就会自动触发。More+info+here.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1742306|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/inputfile.html^0|1O|F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>There is no cross browser way of doing it, for security reasons. What people usually do is overlay the input file over something else and set it's visibility to hidden so it gets triggered on it's own. <a href="http://www.quirksmode.org/dom/inputfile.html" rel="nofollow">More info here.</a></p>


blocks|key|1743330|text|确保在REACT中使用绑定来获取组件属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743331|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>)
++}
}|code-block|syntax|javascript|1743332|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Make sure you are using binding to get component props in REACT</p>

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


blocks|key|1743481|text|以编程方式浏览文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743482|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);
++++}
}|code-block|syntax|javascript|1743483|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>browse file programatically</p>
<pre><code>

function browseFile(accept) {
    const promise = resolvingPromise();
    const input = document.createElement('input');
    input.type = &quot;file&quot;;
    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);
    }
}


</code></pre>


blocks|key|1742386|text|使用jQuery，您可以调用click()来模拟单击。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1742387|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/click/^0|E|7|E|7|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Using jQuery you can call <a href="http://api.jquery.com/click/" rel="nofollow"><code>click()</code></a> to simulate a click.</p>


blocks|key|1956102|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956103|$('#fileInput').val('');|code-block|syntax|javascript|1956104|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me:</p>

<pre><code>$('#fileInput').val('');
</code></pre>


blocks|key|1956567|text|对于那些想要相同但正在使用React的人|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956568|openFileInput+=+()+=>+{
++++this.fileInput.click()
}|code-block|syntax|javascript|1956569|1956570|<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"/>|1956571|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>For those who want the same but are using React</p>

<pre><code>openFileInput = () =&gt; {
    this.fileInput.click()
}
</code></pre>

<hr>

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


blocks|key|1743339|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1743340|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

  uploadButton.addEventListener('click', () =&gt; {
    myInput.click();
  });
&lt;/script&gt;
</code></pre>


<p>I have a hidden file input element. Is it possible to trigger its <em>select file</em> dialog box from a button's click event?</p>


Programmatically trigger "select file" dialog box

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

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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