이미지를 클릭하고 파일 업로드 열기

-1

파일 업 로더를 열려면 내 이미지 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 그러나 나는 점점 오류를 유지한다. 도와주세요.

출처

2017-01-08 Ethan Thompson

봐 여기 : 당신의 onclick 코드가 어디 http://stackoverflow.com/questions/11412284/upload-file-with-one-button입니다 –

? 또한 브라우저는 파일 업로드를 열기 위해 file 유형의 입력 요소가 필요합니다. – ATerry

예 ik와 그것이 작동하지 않아서 삭제했습니다. getElementById를 사용하려고했습니다. –

과 함께 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="">

출처

2017-01-08 11:32:33 DavidDomain

이미지를 클릭하고 파일 업로드 열기

답변

관련 문제