jQuery/JavaScript를 사용하여 파일 이름이 연속되지 않은 디렉터리에서 이미지를 동적으로 로드하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-04 03:21:29
원래의
687명이 탐색했습니다.

How to Dynamically Load Images from a Directory with Non-Consecutive Filenames Using jQuery/JavaScript?

jQuery/JavaScript를 사용하여 디렉터리에서 동적으로 이미지 로드

질문:

필요합니다 "images"라는 폴더에 있는 여러 이미지를 내 웹페이지에 로드합니다. 그러나 이미지 파일 이름은 연속된 정수가 아닙니다. jQuery 또는 JavaScript를 사용하여 이를 달성하려면 어떻게 해야 합니까?

답변:

다음 코드 조각은 "images" 폴더의 모든 이미지를 HTML 페이지:

<code class="javascript">var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});</code>
로그인 후 복사

설명:

코드는 "images" 폴더에 대한 경로를 보유하는 폴더 변수를 생성하는 것으로 시작됩니다. 그런 다음 jQuery $.ajax() 함수를 사용하여 폴더의 내용을 로드합니다. 성공 콜백 함수는 반환된 데이터를 반복하여 파일 확장자가 허용되는 파일 형식(.jpg, .jpeg, .png, .gif)과 일치하는지 확인합니다. 그렇다면 함수는 적절한 소스 속성을 사용하여 이미지 요소를 생성하고 이를 페이지 본문에 추가합니다.

참고:

  • 이 코드 Apache 서버에 옵션 인덱스 기능이 켜져 있다고 가정합니다.
  • Express for Node와 같은 다른 서버의 경우 'serve-index' NPM 패키지를 사용하여 디렉토리 목록을 허용할 수 있습니다.
  • 더 많은 허용되는 파일 유형을 추가하거나 디렉토리 목록을 허용하도록 서버 구성을 수정하여 코드를 확장할 수 있습니다.

위 내용은 jQuery/JavaScript를 사용하여 파일 이름이 연속되지 않은 디렉터리에서 이미지를 동적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿