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>
Related
I'm trying to add auto focus to a form. I have it working in Chrome but cannot get it working in Firefox with the below code. I think the reason could potentially be that it needs to be just autofocus rather than autofocus="autofocus". Would I be correct in assuming this? If so is there some way I can add it? I'm using a framework called SilverStripe and don't have direct access to editing the input field as it's done dynamically so would need to do it via JavaScript most likely.
<input type="text" name="Search" class="form-control search-form" id="TemplateSearchForm_SearchForm_Search" placeholder="Search..." autofocus="autofocus">
Note I am initially hiding the input box and displaying on the click of an icon by adding a class:
jQuery('.search').click(function () {
if(jQuery('.search-btn').hasClass('fa-search')){
jQuery('.search-open').fadeIn(500);
} else {
jQuery('.search-open').fadeOut(500);
}
});
I couldn't find anything in the HTML specification to validate the autofocus behavior exhibited by Chrome. Here's an excerpt from the spec on this behavior.
From 4.10.19.7 Autofocusing a form control: the autofocus attribute:
When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:
[...]
Note: This handles the automatic focusing during document load.
It doesn't mention anything about applying this behavior when the display state changes (as Chrome is apparently doing), only when the element is first inserted into the DOM. This actually appears to a be a bug in Chrome as Firefox is following the HTML spec.
Instead of using the autofocus attribute, you will have to trigger the focus through JavaScript.
You could use JavaScript to automatically focus into any elements with autofocus='yes'
$('[autofocus="yes"], [autofocus="autofocus"], [autofocus="true"]').focus();
This should, theoretically target any elements that have autofocus set to either true, yes, or autofocus and focus on them.
Situation 1
Why is the placeholder selectable in a deactivated input[type="text"]?
<input name="minMax2" disabled="disabled" id="minMax2" type="text"
placeholder="min. 100 / max. 200" min="100" max="200">
Situation 2
I've even have a weird situation where I can type text into the placeholder but this does happens if I click into a text field which is deactivated but because I've left another field and an attached change event did enable the datepicker.
Any idea? Did I miss something or is this a bug of Internet Explorer 10 and 11?
Looks like this is a browser behavior. As an alternative you can keep it enabled (style it appropriately as disabled if needed) and add attribute onfocus="this.blur()"
Here's your demo modified: http://jsfiddle.net/a8ezd/1/
I made a few changes to your jsfiddle from what I understand to be your problem. In your jsfiddle you included jQuery so I thought I would add to your script. I have just changed how you have declared disabled in your input and also made a change to your script so that it now removes the disabled attribute on focus.
$('#test3').prop("disabled", false).focus();
http://jsfiddle.net/a8ezd/3/
If you want to go further and make it so that the user can't even select the placeholder slightly when it's e.g. disabled then you could alter the user select in the css by adding the following with the appropriate browser prefix:
user-select:none;
Example of that here:
http://jsfiddle.net/a8ezd/4/
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/
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.
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.