LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Custom File Upload

In this example, submit is allowed only in case the user uploads a valid image file.

Only pics allowed! (jpg,jpeg,bmp,png)

EMI
CSS
/*just bg and body style*/
.container{
background-color:#1E2832;
padding-bottom:20px;
margin-top:10px;
border-radius:5px;
}
.center{
text-align:center;  
}
#top{
margin-top:20px;  
}
.btn-container{
background:#fff;
border-radius:5px;
padding-bottom:20px;
margin-bottom:20px;
}
.white{
color:white;
}
.imgupload{
color:#1E2832;
padding-top:40px;
font-size:7em;
}
#namefile{
color:black;
}
h4>strong{
color:#ff3f3f
}
.btn-primary{
border-color: #ff3f3f !important;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ff3f3f !important;
border-color: #ff3f3f !important;
}

/*these two are set to not display at start*/
.imgupload.ok{
display:none;
color:green;
}
.imgupload.stop{
display:none;
color:red;
}


/*this sets the actual file input to overlay our button*/ 
#fileup{
opacity: 0;
-moz-opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
width:200px;
cursor: pointer;
position:absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
height: 50px;
}

/*switch between input and not active input*/
#submitbtn{
  padding:5px 50px;
  display:none;
}
#fakebtn{
  padding:5px 40px;
}


/*www.emilianocostanzo.com*/
#sign{
	color:#1E2832;
	position:fixed;
	right:10px;
	bottom:10px;
	text-shadow:0px 0px 0px #1E2832;
	transition:all.3s;
}
#sign:hover{
	color:#1E2832;
	text-shadow:0px 0px 5px #1E2832;
}
JS
$('#fileup').change(function(){
//here we take the file extension and set an array of valid extensions
    var res=$('#fileup').val();
    var arr = res.split("\\");
    var filename=arr.slice(-1)[0];
    filextension=filename.split(".");
    filext="."+filextension.slice(-1)[0];
    valid=[".jpg",".png",".jpeg",".bmp"];
//if file is not valid we show the error icon, the red alert, and hide the submit button
    if (valid.indexOf(filext.toLowerCase())==-1){
        $( ".imgupload" ).hide("slow");
        $( ".imgupload.ok" ).hide("slow");
        $( ".imgupload.stop" ).show("slow");
      
        $('#namefile').css({"color":"red","font-weight":700});
        $('#namefile').html("File "+filename+" is not  pic!");
        
        $( "#submitbtn" ).hide();
        $( "#fakebtn" ).show();
    }else{
        //if file is valid we show the green alert and show the valid submit
        $( ".imgupload" ).hide("slow");
        $( ".imgupload.stop" ).hide("slow");
        $( ".imgupload.ok" ).show("slow");
      
        $('#namefile').css({"color":"green","font-weight":700});
        $('#namefile').html(filename);
      
        $( "#submitbtn" ).show();
        $( "#fakebtn" ).hide();
    }
});
Host Instantly Drag and Drop Website Builder

 

Description

Custom input type file. In this example, submit is allowed only in case the user fills every field and uploads a valid image file.
Term
Mon, 11/27/2017 - 22:00

Related Codes

Pen ID
Pen ID
Pen ID