我有一个隐藏的文件输入元素。是否可以在按钮的点击事件中触发它的“选择文件”对话框?
如果你想要自己的上传文件按钮而不是使用 <input type="file" />
,你可以这样做:
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
请注意我使用了visibility: hidden
而不是display: none
。这是因为在非显示的文件输入框上无法调用点击事件。
这里大多数答案缺少有用的信息:
是的,你可以使用jQuery/JavaScript编程方式点击输入元素,但只有在属于由用户启动的事件处理程序中才能这样操作!
例如,如果您在ajax回调中以编程方式点击按钮,则不会发生任何事情,但如果您将相同的代码行放入由用户引发的事件处理程序中,则它将起作用。
P.S. 如果在程序化点击之前使用debugger;
关键字,它将破坏浏览窗口...至少在Chrome 33中...
$(staticElementParent).on("click", "dynamicChild", function(){})
- Daniel Cheungdebugger;
关键字不再中断编程点击。 - Chris W.仅供参考,这里有一种不需要 JavaScript 的替代方案。这是一个小技巧,利用了标签的点击行为可以将焦点设置到相关联的输入框上。
你需要一个带有正确 for
属性(指向输入框)的 <label>
,可选地使用按钮样式(使用 Bootstrap,可以使用 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" />
我不确定浏览器如何处理对 type="file"
元素的点击(出于安全方面的考虑),但这应该能够起作用:
$('input[type="file"]').click();
我已在Chrome、Firefox和Opera中测试过这个JSFiddle,它们都显示了文件浏览对话框。现在这样的混合解决方案可以提供最佳的体验。
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();
}
export const supportsShowOpenFilePicker = 'showOpenFilePicker' in window && typeof window.showOpenFilePicker === 'function';
- rcbevans<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>
visibility:hidden
应该是更好的选择。 - connyvisibility: hidden
仍会影响布局。你需要使用 display: none
。 - jobukkit我将input[type=file]
包装在一个label标签中,然后根据您的喜好样式化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解决方案。
<input type="file" hidden>
即可消除应用CSS样式的需要。 - Sylvain Lesage<input type="file">
元素,然后模拟点击,很遗憾这是唯一的方法。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
})
})
确保在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>)
}
}
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);
}
}
display:none
的输入框上使用click()
,它起作用了。 - Daniel Cheungclick()
来点击一个display: none
的元素是可行的!;) 这些年发生了多大的变化。 - ffxsamhidden
属性代替style="visibility:hidden"
:<input id="myInput" type="file" hidden>
(https://www.w3schools.com/tags/att_global_hidden.asp) - cespon