Styling the input type file with CSS and a little JS, is this ok?
This functionality is not available in the browsers due to security reasons.
Checkout this explanation: https://stackoverflow.com/a/15201258/586051
Only Firefox browser allows it. Refer the following example in Firefox.
EDIT: You can get the file name of the selected file this way:
EDIT2: The following code snippet demonstrates the styling of file upload button. Here we are actually faking it but the end user wouldnt know about it. ;)
EDIT3: Added value of fullPath
in the comment.
EDIT4: Added <div>
wrapper in HTML
document.getElementById("customButton").addEventListener("click", function(){ document.getElementById("fileUpload").click(); // trigger the click of actual file upload button});
document.getElementById("fileUpload").addEventListener("change", function(){ var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension var fileName = fullPath.split(/(\\|\/)/g).pop(); // fetch the file name document.getElementById("fileName").innerHTML = fileName; // display the file name}, false);
#fileUpload{ display: none; /* do not display the actual file upload button */}
#customButton{ /* style the fake upload button */ background: yellow; border: 1px solid red;}
<div> <input type="file" id="fileUpload"> <!-- actual file upload button --> <button id="customButton">My Custom Button</button> <!-- fake file upload button which can be used for styling ;) --> <span id="fileName"></span></div>
Styling an input type=file button
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input>
tag directly, this is easily possible with the help of a <label>
tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
Styling an input type=file
I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0)
on your .file
class, thus hiding the actual "Browse..." button you usually see in upload controls.
The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.
The second one would be to play with the size of the FileAttachment
input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index
property of the button is higher than the one of the image.
Let me know if these solutions solve your needs.
:D
Styling input type=file
The CSS way (base code found here):
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
How to style a input type=file in html?
LIVE DEMO
<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>
<input id="uploadImage" type="file" />
#imageDrop{
background:#fff;
width:300px;
height:180px;
font-size:20px;
font-style:italic;
border-radius:18px;
border:2px dashed #444;
}
#uploadImage{
visibility: hidden;
height:0px;
width: 0px;
}
How do I style a File Upload button
You can try the below code
$('input[type="file"]').on('change', function() { $('input[type="text"]').val($(this).val());});$('span').on('click', function() { $('input[type="text"]').val($('input[type="file"]').val());});
form.uploadButton { position: relative; display: flex;}
input[type="text"] { width: 200px; height: 40px; box-sizing: border-box; border-radius: 2px; border: 1px solid #ccc; margin-right: 5px;}
span { background: red; border: 0; color: #fff; padding: 0 20px; width: 80px; text-align: center; line-height: 40px; cursor: pointer;}
input[type="file"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; cursor: pointer; width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form class="uploadButton" method="" action="" enctype="multipart/form-data"> <input type="text"> <span>Browse</span> <input type="file" name="file[]" multiple></form>
CSS design a input field type=file
Here's the html:
<span class="filewrap">
Some funny german words I don't understand
<input type="file"/>
</span>
and here's the CSS:
.filewrap{
position:relative;
background:#000;
border:1px solid #cc0000;
padding:15px 100px;
color:#fff;
font-family:sans-serif;
font-size:12px;
}
input[type="file"]{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
cursor:pointer;
}
See this demo fiddle
Get file name when css is applied to input[type=file]
Following this Answer, you can get the file name, and use innerHTML
to show it to user.
document.getElementById('test').addEventListener("change", function() {
var fullPath = document.getElementById('test').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
document.getElementById("test2").innerHTML = filename;;
}
});
.submit {
width: 140px;
height: 40px;
background-color: red;
color: #fff;
text-align: center;
padding: 10px;
line-height: 40px;
cursor: pointer;
}
<input type="file" id="test" style="display:none;">
<label for="test">
<span class="submit">submit</span>
<span id="test2">filename</span>
</label>
Related Topics
Difference Between Client-Side and Server-side Programming
Download File Using an Ajax Request
Rendering HTML Inside Textarea
Show/Hide 'Div' Using JavaScript
JavaScript Does Not Fire After Appending
"Mixed Content Blocked" When Running an Http Ajax Operation in an Https Page
Pass JavaScript Variable to PHP Via Ajax
Encrypt With PHP, Decrypt With JavaScript (Cryptojs)
How to Refresh Page on Back Button Click
Determine Timezone from Latitude/Longitude Without Using Web Services Like Geonames.Org
Displaying Pdf from Arraybuffer
Do Dom Tree Elements With Ids Become Global Properties
How to Change an Element'S Class With JavaScript
Can Scripts Be Inserted With Innerhtml
What Are Data-* HTML Attributes
Adding Options to Select With JavaScript
How to Get the Element Clicked (For the Whole Document)
How to Pick Element Inside Iframe Using Document.Getelementbyid