File upload and data (text) form into HTML table [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I`m trying to make a form that has 3 inputs:
image (file) upload
1st text field
2nd text field (that saves entered text as .txt file and displays a link in the third column)
After entering all 3 inputs, I would like to add the data into existing html table as an additional row.
Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?
Here is the link to my page: https://jsfiddle.net/tvLn0qw7/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:white;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 1000px;
background-color: #FFFFFF;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%;
border: 2px solid #000000;
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
text-align: center;
margin: 0 auto;
}
div#header p {
font-style:normal;
font-size:1.1em;
margin:0;
}
div#content {
padding:0em 0em 5em; /* bottom padding for footer */
border-color: #000000;
border: 2px;
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
text-align:center;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:0.5em;
margin:0;
}
table {
margin: auto;
text-align: center;
color: #0454A8;
font-size: xx-large;
font-style: normal;
font-weight: bold;
border: 1px;
border: #000000;
}
body,td,th {
color: #000000;
}
#upload {
margin: auto;
text-align: center;
}
a:link {
color: #3757A3;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br>
<p>Databse</p>
</div>
<div id="content">
<br><br>
<table width="600px" border="2" cellpadding="15" cellspacing="5">
<tbody>
<tr>
<th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th>
<th style="font-size: medium" scope="col">#</th>
<th style="font-size: medium" scope="col">TEXT FILE</th>
</tr>
<tr>
<th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th>
<th width="8" style="font-size: medium" scope="col">1</th>
<th width="79" style="font-size: medium" scope="col">sample.txt</th>
</tr>
</tbody>
</table>
<br><br> <br>
<<br> <br><br>
<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
<br><br>
Type #:
<input type="text" size="100">
<br><br>
Insert text here:
<input type="text" size="100">
</form>
</div>
<br><br><br>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank you very much.

You're going to need to use mySQL and PHP to do it. PHP is server side scripting and mySQL is database management. You could use jQuery Ajax, but you are going to need some kind of database to accomplish what you're after.
Edit: Forgot to specify if you want it forever it needs to be in some kind of database.

Related

With My Navigation Bar Is Messed Up [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Need help with the text on my navigation bar. The items in it are all messed up, and jumbled I know my code is really sloppy I am new to coding. This is the link with JS bin here http://jsbin.com/cibuvozido/edit?html,output
Here you can see the new code with the navbar corrected already, but I recommend that you use a framework starting can be bootstrap or foundation 6 which is also very good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title> Contact Us Legacy's Web-Design</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.home, .security, .contact, .about, .portfolio {
display: inline-block;
text-align: center;
padding: 10px;
}
a {
text-decoration: none !important;
}
.all {
margin-top:0px;
position:absolute;
margin:none;
border-style:solid;
border-color:#008000;
border-width:4px;
}
#aside {
color:#0ddde7;
text-align:center;
padding-top:20px;
margin:none;
}
nav {
border-bottom:solid;
border-right:solid;
border-left:solid;
border-radius:10px;
border-color:#0ddde7;
border-width:4px;
/* padding-top:20px; */
font-size:1.5em;
background-color:#0f171b;
z-index:0;
}
h2 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 50px;
}
h3 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 330px;
}
.imgg {
margin-top:24px;
margin-left:40px;
border-style:solid;
border-color:#0ddde7;
border-width:2px;
border-radius:18px 18px 18px 18px;
}
.img {
padding: 14px 0 0 1220px;
pointer-events: none;
position:absolute;
}
#search {
padding: 0 0 0 1105px;
height:0;
}
.jwery {
margin-left: auto;
margin-right: auto;
display: table;
}
.jwery a {
-webkit-transition:width 2s;
transition: 2s;
}
.jwery a:hover {
font-size: 1.1em;
}
body {
margin:0;
padding:0;
background-color:#a4a4a4;
}
a:link {color:#0ddde7; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
</head>
<div id="Header">
<div id="search">
<form>
<form id="img" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="18" maxlength="120">
<input type="submit" value="" style="border-style:
none; background: url('searchbutton3.gif') no-repeat; width: 13px; height: 15px;">
</form>
</div>
<img class="img" src="images/search.png" height="19.4">
<nav>
<div class="jwery">
<a class="home" href="Home.html">Home</a>
<a class="security" href="Security.html">Security</a>
<a class="FAQ" href="Portfolio.html">Portfolio</a>
<a class="about" href="About.html">About Us</a>
<a class="contact" href="Contact Us.html">Contact Us</a>
</div>
</nav>
<body>
<img class="imgg" src="images/legacy.png" align=left width=300>
<div id="aside">
<p>You Can Also Email Me At LegacyWebCreations#gmail.com Or Call/Text 252-207-
6688</p>
<p>Feel Free To Leave Me A Message, Question, Comment, Or Recommendation.</p>
<h2>Follow Me! Please Share My Site! </h2>
<h3>Instagram Account: LegacyWebDesign</h3>
<h3>Personl Account: Surfskateskim57</h3>
<h3>Facebook Account: Ryan Miller</h3>
<h3>Group Name: LegacyWebDesign</h3>
<h3>Twitter Account:LegacyWebDesign</h3>
<h3>LinkedIn Account: LegacyWebCreations</h3>
</div>
<div class="all">
<a id="foxyform_embed_link_747752" href="http://www.foxyform.com/">Questions?
Comments?</a>
</div>
<script>
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=747752&sec_hash=fd11cc5da35&width=380px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
</body>
</html>
tell me if this good and only touch the css that I recommend that you
place it in the tab that says css which is best practice that placed
it directly in the html See Ya!! and keep on hacking

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

How to open popup window from each of dynamically generate tr

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?
Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.

on div click show all divs with X id [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:
<table>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
</table>
Javascript:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JS fiddle: http://jsfiddle.net/p3Q7Z/7/
It's hard to tell what you actually want but this should help:
http://jsfiddle.net/p3Q7Z/8/
First, ids must be unique. I removed them.
Next, I added the line:
$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');
This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.
Also, I changed the click handler line to:
$('table').on('click','.can-select1',function(e){
So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.
edit
To modify all next td in the column:
$(this).closest('td').nextAll('td').each(function() {
$(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});
edit after chat, here's a re-write
http://jsfiddle.net/p3Q7Z/12
Use radio buttons and labels:
<td class="column-0 selectable">
<input type="radio" name="column-0" id="column-0-row-0">
<label for="column-0-row-0">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
<div>1</div>
</label>
</td>
Do all the styling in css without names:
td input[type="radio"] {
display: none;
}
td input[type="radio"] + label {
display:none;
cursor:default;
opacity:0;
position: relative;
}
td input[type="radio"] + label img {
vertical-align: middle;
}
td input[type="radio"] + label div {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
color: #111;
}
td.selectable input[type="radio"] + label {
display:block;
cursor:pointer;
opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
cursor:pointer;
opacity:1.0;
}

customize the file button for image upload [duplicate]

This question already has answers here:
Custom Upload Button
(8 answers)
Closed 5 years ago.
I am placed a button for upload image files.I want to customize that button, i want to add more than one image file ,what is the logic to achive.
<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.
Is it possible to customize the text "no files choosen"below the choose button.Meanwile i wise to keep an camera image before the no files choosen text.
How to perform this to improve my site.
Thanks
You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>
<script>
function chooseFile() {
$("#fileInput").click();
}
</script>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
If you don't want to use jQuery replace the script tag with this script tag:
<script>
function chooseFile() {
document.getElementById("fileInput").click();
}
</script>
Try this manipulated solution. (I tried it today for one of my project :) )
HTML
<div class="choose_file">
<span>Choose File</span>
<input name="Select File" type="file" />
</div>
CSS
.choose_file{
position:relative;
display:inline-block;
border-radius:8px;
border:#ebebeb solid 1px;
width:250px;
padding: 4px 6px 4px 8px;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background:white
}
.choose_file input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
DEMO
You can customize it using only CSS. Go through the link below.
HTML
<label class="btn-upload">
<input type="file" name="fileupload">
<button class="btn">Browse</button>
</label>
.btn-upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-upload input[type=file] {
position: absolute;
opacity: 0;
z-index: 0;
max-width: 100%;
height: 100%;
display: block;
}
.btn-upload .btn{
padding: 8px 20px;
background: #337ab7;
border: 1px solid #2e6da4;
color: #fff;
border: 0;
}
.btn-upload:hover .btn{
padding: 8px 20px;
background: #2e6da4;
color: #fff;
border: 0;
}
http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html
<body>
<style>
.image{
position:relative;
display:inline-block;
width:3%;
padding: 0%;
}
.image input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
</style>
<div class="image">
<span><img src='admin/ico/fms.ico' class "image"></span>
<input name="image" type="file" />
</div>
</body>

Categories