Answers:
如果您希望使用自己的按钮来上传文件而不是使用<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事件。
click()
在display:none
输入和它的工作
click()
了display: none
作品元素!;)在过去四年中情况发生了什么变化。
hidden
改为使用属性style="visibility:hidden"
:<input id="myInput" type="file" hidden>
(w3schools.com/tags/att_global_hidden.asp)
这里的大多数答案都缺少有用的信息:
是的,您可以使用jQuery / JavaScript以编程方式单击input元素,但前提是您必须在属于由用户启动的事件的事件处理程序中执行该操作!
因此,例如,如果脚本(脚本)以编程方式单击ajax回调中的按钮,则不会发生任何事情,但是如果将同一行代码放在用户引发的事件处理程序中,它将起作用。
PS debugger;
如果在编程性单击之前,至少在chrome 33中,该关键字会破坏浏览窗口。
$(staticElementParent).on("click", "dynamicChild", function(){})
debugger;
关键字不再破坏程序化点击
仅作记录,还有一种不需要javascript的替代解决方案。利用单击标签将焦点设置在相关输入上这一事实,这有点骇人听闻。
您需要一个<label>
具有适当for
属性(指向输入)的选项,其样式必须像按钮一样(具有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,它们都显示了文件浏览对话框。
hover
事件打开文件对话框:jsfiddle.net/UQfaZ/1
我将包裹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解决方案。
<input type="file" hidden>
即可消除应用CSS样式的需要。
最好的解决方案,适用于所有浏览器..甚至在移动设备上。
<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
应该是一个更好的选择。
visibility: hidden
仍然会影响布局。display: none
是你想要的。
出于安全原因,没有跨浏览器的方法。人们通常要做的是将输入文件覆盖在其他文件上,并将其可见性设置为隐藏,以便自行触发。更多信息在这里。
<input type="file">
,不是<select>
。
$.click()
。
确保您正在使用绑定在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>)
}
}
对于那些想要相同但正在使用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"/>
<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>