Upload Button

Developer
Krishna Babu
Size
2,535 Kb
Views
4,048
  1. Upload Button Previews
  2. Upload Button HTML Codes
  3. Upload Button CSS Codes
  4. Upload Button JS Codes

How do I make an upload button?

Customized upload button with css and jQuery. What is a upload button? How do you make a upload button? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Upload Button Previews
IQ Test

Upload Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Upload Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <p>Compatible with greater then ie7 and all modern browser</p> <h1>Customized Upload button</h1> </header> <div class="upload-btn"> <span>No file selected</span> <label for="file-upload">Browse</label> <input type="file" id="file-upload"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Upload Button - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,900);
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; color: #333;
}
.container { width: 100%; text-align: center;
}
.container header h1 { text-align: center; font-weight: bold; margin-top: 0;
}
.container header p { text-align: center; margin-bottom: 0;
}
.container input[type="file"] { display: none;
}
.container .upload-btn { border: 1px solid #ccc; display: inline-block;
}
.container .upload-btn span { padding: 5px 10px; display: inline-block;
}
.container .upload-btn label { border: 0; background-color: #0d96b6; color: #fff; padding: 5px 10px; display: inline-block;
}

Upload Button - Script Codes JS Codes

$('.upload-btn input').on('change', function(){ $(this).parent().find('span').html($(this).val());
});
Upload Button - Script Codes
Upload Button - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 3
Size 2,535 Kb
Views 4,048
Do you need developer help for Upload Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Krishna Babu (krishnab) Script Codes
Name
Calender
Wipe slider
Justify Horizontal Menu
Background
Bootstrap Carousel
No effect slideshow
Floating menu
Delhi Metro
Javascript Tab
Paging
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!