This question already has answers here:
How to customize <input type="file">?
(18 answers)
Closed 9 years ago.
How do I customize the file upload,
<input type="file" />
To look the same in all browsers?
I want to invoke file browser on clicking on my custom styled button.
You can overload the style on a upload button yourself by setting the opacity of the file upload to 0 and putting a div on top with the style you want. e.g.
<input style="opacity:0; position: fixed;" onchange="openfile(event)" type="file">
<div class="icon">Open</div>
One option is to hide the real input and replace it with a button.
$('input[type=file]').each(function(index,input){
var button = $("<button class='file_btn'>Upload File</button>");
$(input).before(button);
$(input).css({position:'absolute',top:'-1000px'});
button.click(function(){
$(input).trigger('click');
});
});
A working fiddle: http://jsfiddle.net/KQhGR/1/
After thinking for half hour found a solution myself which just solves this problem.(Yes, I knew the answer when I posted this question, but wanted to see how others would solve this, and of course I want to share my solution with the rest)
Working jsfiddle example.
<input style="float:left; width:270px; height:25px;" id="path" name="path" disabled /> <!--disabled it, to avoid user from editing the file path-->
<input style="display:none;" type="file" id="photo-path" name="file" placeholder="" /> <!-- hide the default input type='file' coz its ugly :) -->
<button type="submit" onclick="document.getElementById('photo-path').click(); return false;">Browse</button> <!-- but call hidden input type='file' when user clicks on your custom browse button, -->
This is the JQuery code: (to copy file path to your custom field)
<script type='text/javascript'>
$('input[name="file"]').change(function(){
var fileName = $(this).val();
$('input[name="path"]').val(fileName);
});
</script>
Your best bet for something like this is to use a plugin like Uploadify to not only style the upload button consistently but add a progress bar adn multiple file uploads.
Unfortunately there isn't a reliable way (that I know of) to style file uploads consistently across all browsers. It's one of those controls front end developers don't like to talk about.
Related
I am using a really simple form to allow users to upload files to my server. It works well, but i have noticed that even for very small files, right after selecting the file to upload, it takes a while (2-3 sec) to change the "No file selected" to the actual name of the file selected. (Actually it says it in spanish - guess somebody knows where i am).
The thing is that during this loading time the mouse wheel nor the browser look like they are thinking, so im afraid the user wont be patient enough and will feel its not working.
So i just want to display a text saying, "hey, hold on - its loading" And this is what i have tried with no luck:
A.
<input type="file" name="userf" onload="function(e){e.innerHTML='Loading';};">
</input>
B.
<input type="file" name="userf" onchange="function(e){e.innerHTML='Loading';};">
</input>
C.
<input type="file" name="userf" onload="function(){this.innerHTML='Loading';};">
</input>
D.
<input type="file" name="userf" onchange="function(){this.innerHTML='Loading';}">
</input>
If this is not possible, could i not just change the default message: "No file selected"?
EDIT
If possible, no JQuery, just javascript
You cannot change the default text on an input file element. But you can do some work arounds in order to get something similar you want. It may require jQuery or other framework to do the job.
This post may help: How to change the button text of <input type="file" />?
How can I do to browse my files when i click in a button "Upload" ?
I need to create a hidden file input?
More Explain:
I can't edit css of input type file of my html forms. So in each browser I have a different layout. I don't want it. I want to customize my form.
I created a button. When I click on the button, I want to appear the file selection screen.
When I select the file and press ok , I want to put the path string of my file in the input that I created.
Could you provide more information? You need to use the file html form element.
The file element lets you browse your local documents naturally.
To process the file attachment you need to know a programming language like php
I solved my problem with this code:
<div class="input-append">
<label for="showpath">File Upload:</label>
<input id="showpath" type="text" onclick ="javascript:document.getElementById('CommentFile').click();"/>
<button type="button" onclick ="javascript:document.getElementById('CommentFile').click();"></button>
<input type="file" name="data[Comment][file]" id="CommentFile" style='visibility: hidden;' onchange="updateInput(this.value,'showpath')"/>
</div>
<input type='file' />
More info at w3schools.
I havea form with a file input which is hidden. There will be abutton on click of which,
the open file dialogue should pop up and when we select the file, the file should get uploaded to the server. Is this possible ?
If you set the display to none, it won't work in webkit browsers. But you can set the opacity, width and height to zero, and then call the click event when the other button is clicked.
Here is a working example http://jsfiddle.net/jcVL5/
***Edit: I just saw "the file should get uploaded to the server". You will have to explain what server side language you are using.
<input type="file" id="fileUpload" style="opacity:0; height:0px;width:0px;" />
<input type="button" id="btnUpload" value="test Button" />
<script>
document.getElementById('btnUpload').onclick = function(){
document.getElementById('fileUpload').click();
};
</script>
Have you tried using Fine Uploader? You can see the demo site here http://fineuploader.com if this is what you need.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery trigger file input
I'm working on a form which allows users to upload images to a website. So far I have got a drag and drop solution working in Chrome and Safari. However I also need to support the action of users clicking a button and browsing for files in the traditional manner.
Similar to what this would do:
<input type="file" name="my_file">
However rather than having the clunky file description area and un-editable Browse button I would rather use something like this:
<input type="button" id="get_file">
My question therefore is how to I make this button open a file selection window and process the selection the same way that type="file" would work?
Cheers.
My Solution
HTML:
<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">
CSS:
#my-file { visibility: hidden; }
jQuery:
$('#my-button').click(function(){
$('#my-file').click();
});
Working in Chrome, Firefox, and IE7+ so far (haven't tried IE6).
You could use JavaScript and trigger the hidden file input when the button input has been clicked.
http://jsfiddle.net/gregorypratt/dhyzV/ - simple
http://jsfiddle.net/gregorypratt/dhyzV/1/ - fancier with a little JQuery
Or, you could style a div directly over the file input and set pointer-events in CSS to none to allow the click events to pass through to the file input that is "behind" the fancy div. This only works in certain browsers though; http://caniuse.com/pointer-events
If you want to allow the user to browse for a file, you need to have an input type="file" The closest you could get to your requirement would be to place the input type="file" on the page and hide it. Then, trigger the click event of the input when the button is clicked:
#myFileInput {
display:none;
}
<input type="file" id="myFileInput" />
<input type="button"
onclick="document.getElementById('myFileInput').click()"
value="Select a File" />
Here's a working fiddle.
Note: I would not recommend this approach. The input type="file" is the mechanism that users are accustomed to using for uploading a file.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
In JavaScript can I make a “click” event fire programmatically for a file input element?
I've got a web page that looks like this
<html>
<head>
<title>File Upload Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
<input type="file"></input>
</body>
</html>
My goal is to have the div raise a click event on the file input, and this seems to work exactly as I'd expect in IE and Chrome, but doesn't work in Firefox (no file browser is opened when you click on the div).
Is there a way to get this working in FF?
Is there a way to get this working in FF?
No, and it doesn't work in most common versions of IE, either. IE will open the dialog, but once you've selected a file with it the form won't actually submit.
Abandon hope. The only way to fake a file upload box is using the transparency technique, and that's really not recommended at all as browsers may lay out file upload boxes differently internally (or even provide a file upload control that doesn't include a Browse dialogue), making it highly likely you'll end up with an inoperable form.
Learn to love the grey file upload field, or use progressive enhancement to replace it with Flash where available.
Here's the workaround (FF).
The HTML bit:
<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />
CSS for the input file type:
.file-upload { display:none; }
The jQuery bit:
//bind click
$('#btn-logo').click(function(event) {
$('#logo').click();
});
//capture selected filename
$('#logo').change(function(click) {
$('#text-logo').val(this.value);
});
Upon form submit, the hidden input file will upload the file.
Hope this helps :)