画像をクリックしてファイルを開く

Question

ファイルアップローダを開くために画像onclickを取得しようとしていますが、何も機能していません。

HTML：

<a href="#"> 
    <figure class="profile-picture" id="profile-picture"> 
    </figure> 
    </a> 

はCSS：

figure.profile-picture { 
    background-position: center center; 
    background-image: url(/img/QNdefualt.jpg); 
    background-size: cover; 
    border: 5px #efefef solid; 
    border-radius: 50%; 
    bottom: -50px; 
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px gba(0,0,0,0.3); 
    height: 148px; 
    left: 150px; 
    position: absolute; 
    width: 148px; 
    z-index: 3; 
} 
.profile-picture:hover { 
    background-image: url(/img/defualt-hover.png); 
    background-size: cover; 
} 

私はonclicksを試みたが、私はエラーを得続けます。助けてください。

Answer 1

のinput要素を追加する必要があります。それは目に見える必要はありません。あなたの画像のclickイベントを聞き、隠したinput要素に.click()を誘発してください。

ここは例です。

var imgBtn = document.querySelector('img'); 
 
var fileInp = document.querySelector('[type="file"]'); 
 

 
imgBtn.addEventListener('click', function() { 
 
    fileInp.click(); 
 
})

input[type="file"] { 
 
    display: none; 
 
} 
 

 
img { 
 
    cursor: pointer; 
 
}

<input type="file" /> 
 
<img src="http://placehold.it/200x200/2980b9/FFF?text=Click Me" alt="">