<div class="wrapper">
<h2>Selected file <br /><strong>max 20,000 bytes</strong></h2>
<form>
<input type="file" id="resume" style="display:none">
</form>
<div class="bx-file">
<a id="ancla" href="javascript:void(0);">Search file</a>
<span class="text-faq">No selected file</span>
<span class="text_notice_red">max limite 20000 bytes</span>
<span class="text_notice_green">OK</span>
</div>
</div>
<span class="mysite">Junio Marques | front-end developer Ecommerce - my site: <a href="http://juniomarques.com" target="black">juniomarques.com</a></span>
* {
box-sizing: border-box;
font-family: arial;
}
.wrapper {
margin: 60px auto;
width: 600px;
height: auto;
padding: 40px;
border: 1px solid #cccccc;
transition: all 0.3s cubic-bezier(0.63, -0.33, 1, 0.16);
&:hover {
box-shadow: 0 4px 40px -10px #000000;
transform: translateY(-8px);
}
h2 {
font-size: 30px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 4px;
color: #909090;
margin: 0 0 20px 0;
line-height: 22px;
display:inline-block;
strong {
font-size: 16px;
}
}
}
.bx-file {
position: relative;
display: inline-block;
a {
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
background:#ccc;
padding:5px 10px;
text-decoration:none;
color:#4F4F4F;
margin-right: 10px;
}
.text-faq {
display: inline-block;
margin-top: 40px;
padding: 4px 8px;
transition: background-color 0.3s cubic-bezier(0, 0.7, 0, 1.31);
}
.text-noticeRed {
background-color: red;
color: #ffffff;
}
.text-noticeGreen {
background-color: #70E770;
color: #ffffff;
}
.text_notice_green {
position: absolute;
background: #ffffff;
box-shadow: 0 -5px 6px #525151;
border-radius: 5px;
bottom: 30px;
right:0;
width:0;
height: 0;
overflow:hidden;
transition: all 0.3s cubic-bezier(0, 0.7, 0, 1.31);
}
.text_notice_red {
@extend .text_notice_green;
}
.text_notice_visible {
width: auto;
padding: 10px;
height: auto;
}
}
.mysite {
display:block;
text-align:right;
text-align:center;
display:block;
}
var Filemanager = function() {
// MY OBJ
var myFile = {};
// variables
var input = document.getElementById('resume'),
ancla = document.getElementById('ancla');
// forzar click en input file
ancla.addEventListener('click', resumeClick, false);
function resumeClick() {
if(input){
input.click();
}
}
// Instancia MY OBJ
myFile.varChange = function() {
/*
* DECLARACIÓN VARIABLES
*/
var bxFile = document.querySelectorAll('.bx-file')[0],
textFaq = bxFile.getElementsByClassName('text-faq')[0],
textRed = bxFile.getElementsByClassName('text_notice_red')[0],
textGreen = bxFile.getElementsByClassName('text_notice_green')[0],
tagSpan = bxFile.getElementsByTagName('span')[0];
/*
* LLamar noticeSize()
* cuando cambie el valor del input file
* y pasar datos del file a funcción
*/
input.onchange = function() {
var sizeFile = input.files[0].size,
nameFile = input.value,
nameReduce = nameFile.split("fakepath"),
namePrint = nameReduce[1];
noticeSize(sizeFile, namePrint);
}
// function p/imprimir msg c/valores del file
function noticeSize(sizeFile, namePrint) {
if(sizeFile>20000) {
textRed.className="text_notice_red text_notice_visible";
textFaq.className='text-faq text-noticeRed';
setTimeout(function(){
textRed.className="text_notice_red";
}, 3000);
}else {
textFaq.className='text-faq text-noticeGreen';
textGreen.className="text_notice_green text_notice_visible";
setTimeout(function(){
textGreen.className="text_notice_green";
}, 3000);
}
tagSpan.innerHTML = namePrint + ' - size ' + sizeFile + ' bytes';
}
}
return myFile;
}
var myFile = Filemanager();
myFile.varChange();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.