Opening file select when clicking on a div not file input tag
Question
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 div and I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
I want to use Angular.js rather than jQuery if possible because my project is under Angular.js
5 answers
solution1
14 2015-07-31 18:06:44
You dont need javascript to do this, please dont look at the inline style
<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/
Edited this 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>
solution2
5 2015-07-31 18:28:29
I would use a hidden input paired with a label element styled how I want it.
#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" />
solution3
4 2015-07-31 17:43:41
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
HTML
<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />
jQuery
$('#id').on('click', function() {
$('#yourinputname').trigger('click');
});
See the fiddle
solution4
0 2019-02-02 11:45:13
My File upload form with bootstrap and 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>
solution5
0 2022-07-20 14:56:52
If you are using react: ( sorry for the hideous indentation, stack would not let me format it correctly )
#getFile {
display: none;
}
<label htmlFor="getFile">
<FontIcon iconName="photo" className="uploadIcon"/>
<input type="file" id="getFile" />
</label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.