Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Demo by Roko C.B.</title>
</head>
<body>
  
<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path">...</span> 
  
  
</body>
</html>
 
div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
span.upload-path {
        margin:20px;
        display:block;}
 
$('input[type="file"]').change(function(){
  
  var f = this.files[0];  
  var name = f.name;
  
  $(this).closest('.browse-wrap').next('.upload-path').text(name);
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers