Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?
Add file input, and set its position to quite far away.
Add a button.
Set buttons onclick to $("#myFile").click();
:D
<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">
<button onclick="$('#myFile').click();">Browse</button>
agree with alex
<style>
.file_wrap{
background:url(file.jpg);
overflow:hidden;
width:30px;
height:10px;
}
.file_wrap input{
opacity:0;
font-size:999px;
cursor:pointer;
}
</style>
<div class="file_wrap">
<input type="file" />
</div>
You can use a flash alternative. I have used swfUpload, with great success. Uploadify, is a similar alternative. Both of these have nice feature sets, including progress bars and multiple upload.
You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.
Some examples here:
inputfile
Check out the http://www.uploadify.com/ jQuery plugin.
You can add your own button and position it under the browse button with CSS.
Then set the file input to have 0 opacity.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
Related
I am working on a website and for some reason the input value is not working. It was just working about an hour ago and have made no changes to the site since then. For example: https://www.albright.edu/about-albright/offices-departments/registrar/transcript-requests/ at the bottom of that page, there are two buttons. One is for submit and one is for clear. Neither are showing the "value" part of the input so they both look blank.
There seems to be a plugin in your theme ( maybe AutoOptimize) that's causing the color of the button to be transparent.
input[value] {
color: transparent;
}
Try setting the color on your css.
If you inspect the element with developer tools the text is present but the color is set to transparent (apparently from the plugin autoptimize).
You could try to use
<button type="submit">Submit</button>
or style these inputs with a custom class to set the color of the text
I hope this helps
I'm writing a jquery/javascript application. Part of what I need is a file input, which I need to look the same across Firefox, Chrome, and (ugh) IE. What I've done is made the file input hidden and placed a text box on top of it. Then, I use jquery .click to make clicking the text box have the same effect as clicking the file input, and I use .change to make the contents of the file input show up in the text box. Works fine in Firefox and Chrome, but the horrible horrible people at Microsoft want to ruin my day.
If anybody has the solution, I would be oh so grateful. Thanks in advance!
<input type="text" id="fakefile">
<input type="file" id="realfile">
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').change(function(){
$('#fakefile').val($('#realfile').val());
});
});
It's not possible, you can do some hackyness and add a label to the file input and trigger the click on the label not the input but as soon as you try to submit the form it will simply fail in IE.
The way I solved the problem was to turn the file input opacity to 0 and absolutely position it over the styled element I want the user to think they are clicking. This way they are in fact clicking the file input even though it appears they are clicking my styled element.
Check this:
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').bind("change click", function(){
$('#fakefile').val($('#realfile').val());
});
});
jsfiddle: http://jsfiddle.net/deAf6/
I have a button type button that I will like to place an image over. My code looks like this
<button id="button" type="button" onclick="bus()">
<img src="DestinationH-Bus-Driver-Login.png">
</button>
The problem with this is that I get a gray space that makes the overall image to large, if I use a larger image it works fine. But if I call the site from a phone suddenly the big buttons are to small to see. Any suggestion will be greatly appreciated.
I know about type image but I can't use that because it gives me a button of submit type and I want a button of button type, however the pic does work excellent if I use the image type but not the above method.
Why not just put the onclick event on the image?
<img src="DestinationH-Bus-Driver-Login.png" onClick="bus()" />
If necessary, you could use an input tag of type image and cancel the default form submission in the event handler by returning false:
<input type="image" src="DestinationH-Bus-Driver-Login.png" onclick="bus(); return false;"/>
That should give you the same functionality as a button tag, but with better cross-browser support for styling it with an image.
i am trying to select file when user click on button but that is not working in chrome only
Here See this how i did that
$("#upllnk").click(function() {
$("#ufile").click();
});
Here is my html Code
Select File To Upload
<div style='display:none'><input type='file' name='ufile' id='ufile'/></div>
Reason for Putting input:file in div is to hide that element.
After Esailija's helpful comment, I downloaded a portable version of Google Chrome (8.0.552.215) and indeed it didn't work.
As Esailija suggested you can use the opacity workaround
<div style='opacity:0;'><input type='file' name='ufile' id='ufile'/></div>
^^^^^^^^^ setting the opacity to 0 "hides" the input element
Here's a working fiddle
Triggering a click via JavaScript on a file input triggers security errors (usually after trying to submit the form) and in general doesn't work like you'd expect. This is very prevalent in IE and early versions of Chrome and Firefox.
I've gotten around this problem in the past by wrapping the input in a label. That way, when the label is clicked, it will trigger the input.
.Foo input { visibility: hidden; }
<label class="Foo">Select File to Upload<input type="file" /></label>
Ok so I have an input element of type file and id "test"
When I put in the address bar: javascript: document.getElementById("test").click() it brings up the open file dialog so the user can decide what to upload. However if this same exact line is inserted into the document or done in the console of chrome it does not bring up the open file dialog. In fact the console says that the click() function is undefined. Is there any way in chrome to do this?
Cause it seem to work fine for any of the other browsers
You should wrap file-input element to other (ex.:div):
HTTM:
<div>
<input type='file'>
<div>
CSS:
div{
height:1px;
overflow: hidden;
}
JS:
$('div input').click();
Good luck...
I had the same problem and managed to solve it(though I am using jQuery). I detailed the technique in another question
Jquery trigger file input
The idea was essentially to focus the file input before triggering the click programatically.