어떻게 jQuery를 / 자바 스크립트를 사용하여 내 웹 페이지에 내 폴더 중 하나에서 모든 이미지를로드

해결법

1.로컬 호스트와 문제없이 라이브 서버 모두에서 작동하고, 허용 된 파일 확장자의 구분 된 목록을 확장 할 수 있습니다 :

로컬 호스트와 문제없이 라이브 서버 모두에서 작동하고, 허용 된 파일 확장자의 구분 된 목록을 확장 할 수 있습니다 :
```
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 +"'>" );
            } 
        });
    }
});
```
주의

https://github.com/expressjs/serve-index : 당신이 노드 즉 익스프레스와 같은 다른 서버를 사용하는 경우이 작업에 위의이 NPM 패키지를 사용할 수 있습니다 - 아파치 서버는 기본적으로 설정 옵션 인덱스를 가지고

나열된 얻을하고자하는 파일이 server.js 내부보다 / 이미지에있는 경우 당신이 뭔가를 같이 추가 할 수 있습니다 :
```
const express = require('express');
const app = express();
const path = require('path');

// Allow assets directory listings
const serveIndex = require('serve-index'); 
app.use('/images', serveIndex(path.join(__dirname, '/images')));
```

2.사용하다 :

사용하다 :

var dir = "Src/themes/base/images/";
var fileextension = ".png";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all .png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http://", "");
            $("body").append("<img src='" + dir + filename + "'>");
        });
    }
});

당신은 다른 확장이있는 경우, 당신이 그것을 배열하고 다음와 in_array 사용하여 하나 하나를 통해 갈 수있다 ().

P.s : 위의 소스 코드가 테스트되지 않은 상태입니다.

3.이 페이지의 상단에 로이 M J에 의해 주어진 예에서, 더 파일 확장자를 추가 할 수있는 방법입니다.

이 페이지의 상단에 로이 M J에 의해 주어진 예에서, 더 파일 확장자를 추가 할 수있는 방법입니다.
```
var fileextension = [".png", ".jpg"];
$(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { // here comes the rest of the function made by Roy M J   
```
이 예에서는 좀 더 추가 포함되어있다.

4.여기 한 가지 방법이다. 뿐만 아니라 약간의 PHP 일을 포함한다.

여기 한 가지 방법이다. 뿐만 아니라 약간의 PHP 일을 포함한다.

PHP의 부분 :

$filenameArray = [];

$handle = opendir(dirname(realpath(__FILE__)).'/images/');
        while($file = readdir($handle)){
            if($file !== '.' && $file !== '..'){
                array_push($filenameArray, "images/$file");
            }
        }

echo json_encode($filenameArray);

JQuery와 부분 :

$.ajax({
            url: "getImages.php",
            dataType: "json",
            success: function (data) {

                $.each(data, function(i,filename) {
                    $('#imageDiv').prepend('<img src="'+ filename +'"><br>');
                });
            }
        });

그래서 기본적으로 당신은 그 (것)은 HTML에 추가 / 앞에 추가하면 JSON, JSON은 Ajax 호출을 사용하는 것을 잡아 같은 이미지 파일 이름의 목록을 반환하는 PHP 파일을 수행합니다. 당신은 아마 u는 폴더에서 잡아 파일을 필터링 할 것입니다.

1에서의 PHP 부분에 도움이 있었다

5.jQuery를하지 않고이 일에 관심이있는 경우 - 여기에 순수 JS 변형 대답의 (여기에서)의 현재 대부분의 upvoted :

jQuery를하지 않고이 일에 관심이있는 경우 - 여기에 순수 JS 변형 대답의 (여기에서)의 현재 대부분의 upvoted :

var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
  if (xhr.status === 200) {
    var elements = xhr.response.getElementsByTagName("a");
    for (x of elements) {
      if ( x.href.match(/\.(jpe?g|png|gif)$/) ) { 
          let img = document.createElement("img");
          img.src = x.href;
          document.body.appendChild(img);
      } 
    };
  } 
  else {
    alert('Request failed. Returned status of ' + xhr.status);
  }
}
xhr.send()

6.내 경우에는, 당신은 당신의 자신의 컴퓨터에 로컬 폴더에서 이미지를로드하고 싶습니다 경우에, 아주 짧은 Windows 배치 파일을 할 수있는 간단한 방법이있다. 이것은> 사용 파일에 어떤 명령의 출력을 전송하는 기능 (파일에 추가하는) >> (파일을 덮어) 등을 사용한다.

내 경우에는, 당신은 당신의 자신의 컴퓨터에 로컬 폴더에서 이미지를로드하고 싶습니다 경우에, 아주 짧은 Windows 배치 파일을 할 수있는 간단한 방법이있다. 이것은> 사용 파일에 어떤 명령의 출력을 전송하는 기능 (파일에 추가하는) >> (파일을 덮어) 등을 사용한다.

잠재적으로,이 같은 일반 텍스트 파일에 파일 이름의 출력 A를 목록 수 :
```
dir /B > filenames.txt
```
다음에로드 할 수있는 자바 스크립트 파일 대신 I 출력 있도록하지만, 텍스트 파일에서 읽는 것이 더 주위 faffing 필요하여 그 안에있는 모든 파일 이름과 전역 변수를 만듭니다.
```
echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js
dir /B images >> folder_contents.js
echo */}); >> folder_contents.js
```
주석 내부 표기와 이상한 기능을하는 이유는 자바 스크립트에서 여러 줄 문자열에 대한 제한을 주위를 얻는 것입니다. 내가 여기에 해결 방법을 찾을 수 있도록 dir 명령의 출력은, 올바른 문자열을 작성하는 포맷 할 수 없습니다.
```
function mlString(f) {
    return f.toString().
        replace(/^[^\/]+\/\*!?/, '').
        replace(/\*\/[^\/]+$/, '');
}
```
생성 된 자바 스크립트 파일을 실행하기 전에 기본 코드에서이 추가, 다음은 dir 명령의 출력을 포함하는 문자열입니다 g_FOLDER_CONTENTS라는 전역 변수를해야합니다. 이 다음 토큰 화 될 수 있으며, 당신은 당신이 당신이 좋아하는 일을 할 수있는 파일 이름의 목록을해야합니다.
```
var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
```
여기에 모두 넣어 함께의 예 image_loader.zip

예에서, run.bat를은 자바 스크립트 파일을 생성하고 자신을 개방 index.html을하지 않아도, 그래서 index.html을 엽니 다.

참고 : Windows에서 실행 타입 박쥐, 그래서이 같은 어떤 임의의 인터넷 링크에서 다운로드하는 경우 실행하기 전에 텍스트 편집기에서 엽니 다.

Linux 또는 OSX를 실행하는 경우, 당신은 아마 배치 파일과 비슷한 일을하고 mlString의 faff의없이 올바른 형식의 자바 스크립트 문자열을 생성 할 수 있습니다.

7.

$(document).ready(function(){
  var dir = "test/"; // folder location
  var fileextension = ".jpg"; // image format
  var i = "1";

  $(function imageloop(){
    $("<img />").attr('src', dir + i + fileextension ).appendTo(".testing");
    if (i==13){
      alert('loaded');
    }
    else{
      i++;
      imageloop();
    };
  });   
});

이 스크립트, 나는 13.jpg에 ... 1.JPG, 2.JPG, 3.JPG, 같은 폴더 내 이미지 파일을 명명했다.

당신이 원하는대로 당신은 디렉토리와 파일 이름을 변경할 수 있습니다.

8.로코 C. Buljan의 답변에 따라, 나는 폴더 및 하위 폴더에서 이미지를 얻을이 방법을 만들었습니다. 이것은 몇 가지 오류 처리가 필요하지만 간단한 폴더 구조에 대한 벌금을 작동 할 수 있습니다.

로코 C. Buljan의 답변에 따라, 나는 폴더 및 하위 폴더에서 이미지를 얻을이 방법을 만들었습니다. 이것은 몇 가지 오류 처리가 필요하지만 간단한 폴더 구조에 대한 벌금을 작동 할 수 있습니다.

var findImages = function(){
    var parentDir = "./Resource/materials/";

    var fileCrowler = function(data){
        var titlestr = $(data).filter('title').text();
        // "Directory listing for /Resource/materials/xxx"
        var thisDirectory = titlestr.slice(titlestr.indexOf('/'), titlestr.length)

        //List all image file names in the page
        $(data).find("a").attr("href", function (i, filename) {
            if( filename.match(/\.(jpe?g|png|gif)$/) ) { 
                var fileNameWOExtension = filename.slice(0, filename.lastIndexOf('.'))
                var img_html = "<img src='{0}' id='{1}' alt='{2}' width='75' height='75' hspace='2' vspace='2' onclick='onImageSelection(this);'>".format(thisDirectory + filename, fileNameWOExtension, fileNameWOExtension);
                $("#image_pane").append(img_html);
            }
            else{ 
                $.ajax({
                    url: thisDirectory + filename,
                    success: fileCrowler
                });
            }
        });}

        $.ajax({
        url: parentDir,
        success: fileCrowler
    });
}

9.자동으로이 작업을 수행 할 수 없습니다. 귀하의 JS는 같은 디렉토리에있는 파일을 볼 수 없습니다.

자동으로이 작업을 수행 할 수 없습니다. 귀하의 JS는 같은 디렉토리에있는 파일을 볼 수 없습니다.

가장 쉬운 당신의 자바 스크립트에 그 이미지 이름의 목록을 제공하는 아마.

그렇지 않으면, 당신은 JS를 사용하여 웹 서버에서 디렉토리 목록을 가져올 수있을 것과 구문 분석 이미지의 목록을 얻을 수 있습니다.
10.jQuery를 당신은 서버 측 스크립트를 호출하는 Ajax를 사용할 수 있습니다. 서버 측 스크립트는 폴더의 모든 파일을 찾아 반환 된 정보를 처리 할 필요가 어디 html 파일로 돌아갑니다.

jQuery를 당신은 서버 측 스크립트를 호출하는 Ajax를 사용할 수 있습니다. 서버 측 스크립트는 폴더의 모든 파일을 찾아 반환 된 정보를 처리 할 필요가 어디 html 파일로 돌아갑니다.
11.당신은 디렉토리에있는 파일 이름을 얻기 위해 fs.readdir 또는 fs.readdirSync 방법을 사용할 수 있습니다.

당신은 디렉토리에있는 파일 이름을 얻기 위해 fs.readdir 또는 fs.readdirSync 방법을 사용할 수 있습니다.

두 방법의 차이는, 사용자가 판독 될 때 프로세스가 종료 실행되는 콜백 함수를 제공 할 수 있도록 첫 번째는 비동기이다.

두 번째는 것이다 파일 이름 배열을 반환하지만 읽기 과정이 종료 될 때까지 코드의 더 실행을 중지 동기입니다.

후에 당신은 단순히 이름을 반복해야하고 APPEND 기능을 사용하는 것으로, 자신의 적절한 위치에 추가합니다. 이 HTML DOM 및 JS 참조를 참조하십시오 어떻게 작동하는지 확인하려면

12.다음 스크립트를 추가합니다 :

다음 스크립트를 추가합니다 :

<script type="text/javascript">

function mlString(f) {
    return f.toString().
        replace(/^[^\/]+\/\*!?/, '');
        replace(/\*\/[^\/]+$/, '');
}

function run_onload() {
    console.log("Sample text for console");
    var filenames = g_FOLDER_CONTENTS.match(/\S+/g);
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < filenames.length; ++i) {
        var extension = filenames[i].substring(filenames[i].length-3);
        if (extension == "png" || extension == "jpg") {

var iDiv = document.createElement('div');
iDiv.id = 'images';
iDiv.className = 'item';
document.getElementById("image_div").appendChild(iDiv);
iDiv.appendChild(fragment);

            var image = document.createElement("img");
            image.className = "fancybox";
            image.src = "images/" + filenames[i];
            fragment.appendChild(image);
        }
    }
     document.getElementById("images").appendChild(fragment);

}

</script>

다음 다음과 JS 파일을 만듭니다

var g_FOLDER_CONTENTS = mlString(function() { /*! 
1.png
2.png
3.png 
*/});

13.(이전에 제안 된)가 같은 것을 생성 될 때, 크롬을 사용하여 작업 링크에서 이미지 파일을하지 않았다 검색 :

(이전에 제안 된)가 같은 것을 생성 될 때, 크롬을 사용하여 작업 링크에서 이미지 파일을하지 않았다 검색 :
```
(...) i18nTemplate.process(document, loadTimeData);
</script>
<script>start("current directory...")</script>
<script>addRow("..","..",1,"170 B","10/2/15, 8:32:45 PM");</script>
<script>addRow("fotos-interessantes-11.jpg","fotos-interessantes-> 11.jpg",false,"","");</script>
```
어쩌면 가장 신뢰할 수있는 방법은 같은 것을 할 것입니다 :

VAR 폴더 = "IMG /"; {(아약스 $ URL : 폴더, 성공 : 기능 (데이터) { VAR patt1 = /"([^"]*\.(jpe?g|png|gif))"/gi; // 추출물 "* .JPEG"또는 "* .JPG"또는 "* .png를"또는 "* .gif 중요 " VAR 결과 data.match (patt1를) =; 결과 = result.map (함수 (엘) {반환 el.replace (/ "/ g," ");}); // 따옴표 (") 파일 이름 + 확장 // TODO 주변을 제거 : 정규 표현식에서이 작업을 수행! VAR uniqueNames = []; //이 배열은 중복 된 이미지를 제거하는 데 도움이 될 것입니다 $ .each (결과, 기능 (전, 엘) { VAR el_url_encoded =에 encodeURIComponent (엘); // URL로 변환 동일한 이름을 가진 피할 이미지 만 인코딩 을 console.log ( "분석중인 :"+ 엘); 경우 ($. inArray (엘, uniqueNames) === -1 && $ .inArray (el_url_encoded, uniqueNames) === -1) { CONSOLE.LOG은 (el_url_encoded + "추가"); uniqueNames.push (el_url_encoded); $ ( "# 슬라이더") APPEND ( "").; // 마침내 HTML에 추가 } {다른 사람을 console.log ( "이미!"+ el_url_encoded); } }); }, 오류 : 함수 (XHR, textStatus, ERR) { 경고 ( '오류 : 여기에 우리가 간다 ...'); 경고 (textStatus); 경고 (ERR); 경고 ( "readyState가 :"+ xhr.readyState + "\ n xhrStatus :"+ xhr.status); 경고 ( "에서 responseText :"+ xhr.responseText); } }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

14.이것은 나를 위해 작품, 내가 원하는 것은 당신이 당신이 예를 들어 이미지를 찾을 수있는 디렉토리를 넣어 가질 수 있도록 내 페이지에 직접 이미지를 나열하는 것입니다 코드입니다 -> DIR = "이미지 /" 내가 filename.substring = 문자열 var에 경로 이름을 (filename.lastIndexOf를 ( '/') + 1); 있는 난 그냥 나열된 파일의 이름을 가지고 있는지 확인하고 내가 링크 끝에 내 URL은 몸에 게시하기

이것은 나를 위해 작품, 내가 원하는 것은 당신이 당신이 예를 들어 이미지를 찾을 수있는 디렉토리를 넣어 가질 수 있도록 내 페이지에 직접 이미지를 나열하는 것입니다 코드입니다 -> DIR = "이미지 /" 내가 filename.substring = 문자열 var에 경로 이름을 (filename.lastIndexOf를 ( '/') + 1); 있는 난 그냥 나열된 파일의 이름을 가지고 있는지 확인하고 내가 링크 끝에 내 URL은 몸에 게시하기

$ ("body"). append ($ ("<img src =" + dir + pathName + "> </ img>"));

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.6.3.min.js"></script>
        <script>


        var dir = "imagenes/";
        var fileextension = ".jpg";
        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,
            success: function (data) {
                //Lsit all png file names in the page
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.pathname, "").replace("http://", "");
            var pathName = filename.substring(filename.lastIndexOf('/') + 1);               
                    $("body").append($("<img src=" + dir + pathName + "></img>"));
            console.log(dir+pathName);
                });
            }
        });



        </script>

  </head>
  <body>
<img src="1_1.jpg">
  </body>
</html>

from https://stackoverflow.com/questions/18480550/how-to-load-all-the-images-from-one-of-my-folder-into-my-web-page-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를하고 AJAX 응답 헤더 (0)	2020.10.03
[JQUERY] Reactjs는 jsx에 HTML 문자열을 변환 (0)	2020.10.03
[JQUERY] 어떻게 $ 아약스와 쿼리 문자열 대신 JSON을 보내? (0)	2020.10.03
[JQUERY] 대표 VS 라이브 jQuery를 () () [중복] (0)	2020.10.02
[JQUERY] 의 jQuery CSS 속성을 사용하여 배경 이미지 설정 (0)	2020.10.02

복붙노트

[JQUERY] 어떻게 jQuery를 / 자바 스크립트를 사용하여 내 웹 페이지에 내 폴더 중 하나에서 모든 이미지를로드

어떻게 jQuery를 / 자바 스크립트를 사용하여 내 웹 페이지에 내 폴더 중 하나에서 모든 이미지를로드

해결법

1.로컬 호스트와 문제없이 라이브 서버 모두에서 작동하고, 허용 된 파일 확장자의 구분 된 목록을 확장 할 수 있습니다 :

2.사용하다 :

3.이 페이지의 상단에 로이 M J에 의해 주어진 예에서, 더 파일 확장자를 추가 할 수있는 방법입니다.

4.여기 한 가지 방법이다. 뿐만 아니라 약간의 PHP 일을 포함한다.

5.jQuery를하지 않고이 일에 관심이있는 경우 - 여기에 순수 JS 변형 대답의 (여기에서)의 현재 대부분의 upvoted :

7.

8.로코 C. Buljan의 답변에 따라, 나는 폴더 및 하위 폴더에서 이미지를 얻을이 방법을 만들었습니다. 이것은 몇 가지 오류 처리가 필요하지만 간단한 폴더 구조에 대한 벌금을 작동 할 수 있습니다.

9.자동으로이 작업을 수행 할 수 없습니다. 귀하의 JS는 같은 디렉토리에있는 파일을 볼 수 없습니다.

10.jQuery를 당신은 서버 측 스크립트를 호출하는 Ajax를 사용할 수 있습니다. 서버 측 스크립트는 폴더의 모든 파일을 찾아 반환 된 정보를 처리 할 필요가 어디 html 파일로 돌아갑니다.

11.당신은 디렉토리에있는 파일 이름을 얻기 위해 fs.readdir 또는 fs.readdirSync 방법을 사용할 수 있습니다.

12.다음 스크립트를 추가합니다 :

13.(이전에 제안 된)가 같은 것을 생성 될 때, 크롬을 사용하여 작업 링크에서 이미지 파일을하지 않았다 검색 :

'JQUERY' 카테고리의 다른 글

티스토리툴바