I have a question. I have a bootstrap input with type of file:
Html code:
input id="fileUpload" class="form-control" name="FileUpload" multiple="" type="file"
However it turns out to be that the "browse" button is being cropped. I would like to ask if it is possible or how to change the size of the "browse" button using html or css.
<input id="fileUpload" name="FileUpload" multiple="" type="file" />
If you would like to keep your fileupload as button please look at this
Twitter Bootstrap Form File Element upload button
Related
I want to customize the input element by changing the text to "Choose file ..." and hide the file's name. Also if a user click the button a window is opened for user to choose file. The code is
<button>
<label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">
With Chrome, if I click the button a window is popped up for me to choose the file. However it doesn't work with Firefox and IE. Do you know how can I make it work for all three browsers? Thank you.
The label tag does not work for buttons. It is by and large used with radio buttons. The below should do what you are looking for:
<button id="btnFile" onclick="upload.click();">
Choose file ...
</button>
<input type="file" id="upload" style="display:none">
Your HTML is invalid. A label cannot be a descendant of a button.
Remove the button:
<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">
(Tested in Firefox. I don't have a copy of IE to hand.)
If you want something that looks like a button, then style it that way with CSS.
I need to change the "Browse" button text according to the locale in a JSP. (Ex. Russian , Portuguese) for a Spring based project.
Following is the current implementation for the browse button
<td><input type="file" id="file" name="fileName"/></td>
As I know we can't change the text for input type file. It's the default behavior for a browse button int he browser.
I tried the following solution
<input type="button" id="button" value="Browse"/>
<input type="file" id="fileName" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName').value = this.value"/>
But above one is giving security issue in the browser.
In https://stackoverflow.com/ it's having the ideal solution for this (change text for the browse button using input type file):
<input type="file" name="filename" id="filename-input" value="browse" size="18" style="float: right; width: 250px;">
Can anyone help me to resolve this problem or the way to implement above solution( https://stackoverflow.com/ file upload).
You might be looking for this answer to a similar question.
It suggests using Bootstrap File-system css styling.
suggest you to do it this way to keep it simple:
<input type="file" style="display:none"/>
<button id="browse">whatever</button>
$('#browse').click(function(){
$('input[type="file"]').trigger('click');
});
How do I mimic HTML form "Browse" and "Submit" buttons as done in facebook?
My form is:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
</form>
So far I can just do it in the traditional way. But what I really need is:
When the user clicks "Upload Picture" label or button or whatsoever, it mimics "Browse" button and on selecting a picture it mimics "Submit" button events. I don't want to show the odd looking browse and submit buttons...You got my point?
I've used PLUpload for something similar in the past. It is primarily for larger files, but it does the browsing and masking as you desire. I've even set up the JS to auto submit once the image is selected. It doesn't take much as long as you have the basic understanding of JS.
http://www.plupload.com/
I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after
I have a html file selector in index.php file.Code is given bellow
//index.php (This is just an example)
<form enctype="multipart/form-data" action="http://myserver/abc/upload.php" method="POST">
Select image to upload :
<input name="photo" type="file" size="30" width="250">
<input type="submit" value="Upload"/>
</form>
In firefox browser I can see file selector with a text field(which display the file path) and a button named 'Browse'(As a normal file selecting field)
But in chrome browser I can't see the text field.And button name is 'Chose file' not 'Browse'.
How can I fix this?
I need to display this in all browsers as it is display in firefox browser
there is no standard way of customizing file input style, but you can find a tons of css/js tricks. use keywords: custom css file input
Change your file type by adding this inline style
<input name="photo" type="file" size="30" width="250" style="line-height:0;">