이 글은 JavaScript와 HTML을 사용하여 이미지를 업로드하는 방법을 보여줍니다.
JavaScript/HTML을 사용하여 간단한 이미지를 업로드하는 방법은 무엇입니까?
JavaScript를 사용하여 간단한 이미지를 업로드하려면 먼저 HTML 페이지에 이미지 태그를 추가한 다음 JavaScript 코드를 활용하여 이미지를 웹 페이지에 로드하고 선택합니다.
실용적인 의미를 위해 명시된 지침을 시도하십시오.
예
우선 주어진 지침을 따르십시오.
- 삽입 ' <입력> ” 요소를 선택하고 입력 유형을 “로 지정합니다. 파일 '.
- 이 '파일' 유형은 file-select의 필드를 결정하고 ' 검색 ” 버튼을 눌러 파일을 업로드합니다.
- “
” 태그는 줄 바꿈을 삽입합니다. - 그런 다음 '를 삽입합니다.
” HTML 태그를 추가하고 “ ID ” 속성을 사용하여 특정 이름을 가진 고유 ID를 지정합니다.
- “ 소스 ” 미디어 파일의 URL을 추가하는 데 사용되는 속성:
< br >
< 이미지 아이디 = 'myImage' 소스 = '#' >
파일 옵션이 생성되었으며 입력을 수락한 후에만 이미지 이름을 표시할 수 있음을 알 수 있습니다.
이제 ' <스크립트> ” 태그에서 다음 코드를 사용합니다.
< 스크립트 >
창문. addEventListener ( '짐' , 기능 ( ) {
문서. 쿼리 선택기 ( '입력[유형='파일']' ) . addEventListener ( '변화' , 기능 ( ) {
만약에 ( 이것 . 파일 && 이것 . 파일 [ 0 ] ) {
변형 = 문서. getElementById ( 'img_content' ) ;
이미지. 길 위에 = ( ) => {
URL . revokeObjectURL ( 이미지. 소스 ) ;
}
이미지. 소스 = URL . createObjectURL ( 이것 . 파일 [ 0 ] ) ;
}
} ) ;
} ) ;
스크립트 >
위의 코드 조각에서:
- “ addEventListener() ” JavaScript 메서드를 사용하면 정의된 이벤트 핸들러를 요소에 삽입하거나 첨부할 수 있습니다.
- “ 쿼리 선택기() ”는 특정 선택자와 연결된 특정 문서의 첫 번째 항목을 반환하는 데 사용되는 메서드입니다.
- “ getElementById() ” 메소드는 정의된 id를 이용하여 요소를 가져오는 데 사용됩니다. 이를 위해 의 값이 매개변수로 전달됩니다.
- “ 취소객체URL() ”는 URL을 사용하여 생성된 기존 개체 URL을 해제합니다. 이를 위해 이미지의 URL이 이 메소드의 매개변수로 전달됩니다.
- “ createObjectURL() ”는 특정 문자열이 매개 변수에 전달된 개체를 나타내는 URL을 갖도록 만드는 JavaScript 정적 메서드입니다.
산출
간단한 이미지를 성공적으로 업로드했음을 알 수 있습니다.
결론
JavaScript를 사용하여 간단한 이미지를 업로드하려면 ' addEventListener() ” 정의된 이벤트 핸들러를 요소에 삽입하거나 첨부할 수 있는 메서드입니다. 그런 다음 id로 정의된 요소에 액세스하고 ' 취소객체URL() ' 그리고 ' createObjectURL() 방법. 이 게시물은 JavaScript/HTML을 사용하여 간단한 이미지 업로드 방법을 설명했습니다.