Obraz jquery na Hover tworzy plik typu wejściowego

Question

Podczas gdy najeżdżam kursorem ikona pokazuje obraz. Ale chcę, aby wyświetlić ikonę jak ten

a ja kliknąć, powinien umożliwić przeglądanie plików jak

<input type ='file'> 

Jak mogę to zrobić?

Próbowałem jak umieścić tag pliku dla wszystkich, ale to nie zadziałało. Jak mogę to zrobić?

.profile-img-container { 
 
    position: absolute; 
 
    width:50%; 
 
} 
 

 
.profile-img-container img:hover { 
 
    opacity: 0.5; 
 
    z-index: 501; 
 
} 
 

 
.profile-img-container img:hover + i { 
 
    display: block; 
 
    z-index: 500; 
 
} 
 

 
.profile-img-container i { 
 
    display: none; 
 
    position: absolute; 
 
    margin-left:43%; 
 
    margin-top:40%; 
 
} 
 

 
.profile-img-container img { 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<div class="profile-img-container"> 
 
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> 
 
    <i class="fa fa-upload fa-5x"></i> 
 
</div>

Fiddle

Answer 1

Trzeba dodać input[type="file"] do kodu i uczynić go niewidzialnym. Ponadto, zajmuje całe miejsce img, ustaw je na position na absolute i wszystkie inne style, aby zajęło to całe miejsce.

Jak to:

.profile-img-container { 
 
    position: absolute; 
 
    /*width:50%;*/ 
 
    /*border-radius:50%;*/ 
 
    overflow:hidden; 
 
} 
 

 
.profile-img-container img:hover { 
 
    opacity: 0.5; 
 
    z-index: 501; 
 
} 
 

 
.profile-img-container img:hover + i { 
 
    display: block; 
 
    z-index: 500; 
 
} 
 

 
.profile-img-container .icon-wrapper { 
 
    position: absolute; 
 
    bottom:0; 
 
    left:0; 
 
    background:rgba(0,0,0,0.7); 
 
    color:#fff; 
 
    text-align:center; 
 
    width:100%; 
 
    padding:5px; 
 
} 
 

 
/*.profile-img-container img { 
 
position:absolute; 
 
}*/ 
 

 
/*.profile-img-container { 
 
    position:relative; 
 
}*/ 
 

 
input[type="file"] { 
 
    opacity:0; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<div class="profile-img-container img-circle"> 
 
    <input type="file" /> 
 
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> 
 
    <div class="icon-wrapper"> 
 
    <i class="fa fa-upload fa-5x"></i> 
 
    </div> 
 
</div>

Answer 2

Należy dodać plik wejściowy w kodzie, ale sprawiają, że niewidzialne następnie można uzyskać przeglądania pliku z jQuery.

HTML:

<input id='uploadfile' type ='file'> 

JS:

$('.profile-img-container img').click(function(){ 
    $('#uploadfile').click(); 
}); 

Working Fiddle

Drugi sposób na przyszłe pytania:

<input id='uploadfile' type ='file'> 

input#uploadfile { 
    width: 200px; 
    height: 200px; 
    background: url('http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'); 
    border-radius: 50%; 
    display: block; 
    padding-top: 23.5%; 
    box-sizing: border-box; 
    overflow: hidden; 
    background-size: 100%; 
} 

Working Fiddle