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 중국어 웹사이트의 기타 관련 기사를 참조하세요!