Javascript 单击 div 而非文件输入标签时打开文件选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31752064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening file select when clicking on a div not file input tag
提问by Fcoder
I wanted to design an image uploader. For selecting an image we do this:
我想设计一个图片上传器。为了选择图像，我们这样做：
<input type="file" />
but I don't want to use that regular input, I have a divand I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
但我不想使用那个常规输入，我有一个div，我希望当用户点击它时，文件选择对话框打开，之后一切都以标准方式继续。
I want to use Angular.jsrather than jQueryif possible because my project is under Angular.js
我想使用Angular.js而不是jQuery如果可能，因为我的项目正在下Angular.js
回答by Raymond Nijland
You dont need javascript to do this, please dont look at the inline style
你不需要 javascript 来做到这一点，请不要看内联样式
<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" >
Open
<input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
</div>
Note you need to add more crossbrowser opacity lines
请注意，您需要添加更多跨浏览器不透明线
see demo http://jsfiddle.net/yp2dykn5/
见演示http://jsfiddle.net/yp2dykn5/
Editedthis seams to be a populair question/answer.
So i updated this answer with the information below including cross browser opacity lines support.
将此接缝编辑为流行的问题/答案。
所以我用下面的信息更新了这个答案，包括跨浏览器不透明度线支持。
div {
position: relative;
border: 1px solid red;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.file_upload {
opacity: 0.0;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape or and older firefox browsers */
-moz-opacity: 0.0;
/* older Safari browsers */
-khtml-opacity: 0.0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height:100%;
}<form>
<div>
Open
<input type="file" class="file_upload" />
</div>
</form>回答by Xion Dark
I would use a hidden inputpaired with a labelelement styled how I want it.
我会使用一个隐藏input的label元素搭配我想要的样式。
#getFile {
display: none;
}
#getFileLabel {
display: inline-block;
background: red;
height: 50px;
width: 100px;
}<label id="getFileLabel" for="getFile">Open File</label>
<input type="file" id="getFile" />回答by Lal
My suggestion with Jquery would be to keep a div and an input[type="file"].The input should be made hidden and trigger the click of input using JQuery, like below
我对 Jquery 的建议是保留一个 div 和一个input[type="file"].The 输入应该隐藏并使用 JQuery 触发输入的点击，如下所示
HTML
HTML
<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />
jQuery
jQuery
$('#id').on('click', function() {
$('#yourinputname').trigger('click');
});
See the fiddle
看小提琴
回答by Ebuka
My File upload form with bootstrap and fontawesome
带有 bootstrap 和 fontawesome 的我的文件上传表单
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" />
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data" >
<div class="card mb-4 shadow-sm p-4">
<h4 class="my-0 font-weight-normal">Upload File</h4>
<div class="card-body">
<h2 class="card-title">
<label style="cursor: pointer;" for="file_upload">
<span class="text-muted fa fa-upload"></span>
</label>
<input type="file" id="file_upload" class="d-none"/>
</h2>
</div>
</div>
</form>
</body>
</html>
