복붙노트

[JQUERY] 단지 자바 스크립트를 사용하여 폴더에서 이미지 파일 이름은 모두의 목록을 반환하는 방법이 있나요?

JQUERY

단지 자바 스크립트를 사용하여 폴더에서 이미지 파일 이름은 모두의 목록을 반환하는 방법이 있나요?

해결법

  1. 1.아니, 당신은 혼자가 자바 스크립트를 사용하여이 작업을 수행 할 수 없습니다. 클라이언트 측 자바 스크립트는 디렉토리의 내용을 내가 당신에 대해 질문하고 생각하는 방식을 읽을 수 없습니다.

    아니, 당신은 혼자가 자바 스크립트를 사용하여이 작업을 수행 할 수 없습니다. 클라이언트 측 자바 스크립트는 디렉토리의 내용을 내가 당신에 대해 질문하고 생각하는 방식을 읽을 수 없습니다.

    당신이 이미지 디렉토리를 (대한 인덱스 페이지를 표시하거나 웹 서버를 구성)에 인덱스 페이지를 추가 할 수있어, 동일한 서버에서 자바 스크립트를 제공하는 경우 그러나, 당신은을 가져 오기 위해 AJAX 호출을 만들 수 인덱스와 다음을 구문 분석합니다.

    즉

    1) yoursite.com의 관련 디렉토리 아파치에서 인덱스를 사용 :

    http://www.cyberciti.biz/faq/enabling-apache-file-directory-indexing/

    2)이어서 / 페치와 jQuery 파싱. 당신은 페이지를 긁어 최선의 방법 운동해야하고 거기에 전체 목록을 가져 오는 중보다 효율적인 방법은 거의 확실하지만 예를 들어 :

    $.ajax({
  url: "http://yoursite.com/images/",
  success: function(data){
     $(data).find("td > a").each(function(){
        // will loop through 
        alert("Found a file: " + $(this).attr("href"));
     });
  }
});

  2. 2.이것은 당신이 URL에서 정의하는 폴더에있는 모든 JPG 파일을 나열합니다 : 그들은 단락으로 사업부에 추가합니다. UL 리와 함께뿐만 아니라 그것을 할 수 있습니다.

    이것은 당신이 URL에서 정의하는 폴더에있는 모든 JPG 파일을 나열합니다 : 그들은 단락으로 사업부에 추가합니다. UL 리와 함께뿐만 아니라 그것을 할 수 있습니다.

    $.ajax({
  url: "YOUR FOLDER",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
        var images = $(this).attr("href");

        $('<p></p>').html(images).appendTo('a div of your choice')

     });
  }
});

  3. 3.제 자바 스크립트는 클라이언트 측 기술과 서버에 아무것도 할 수 없습니다. 당신은 그러나 당신이 필요로하는 정보를 반환 할 수있는 서버 측 스크립트 (예를 들어, PHP)를 호출하는 AJAX를 사용할 수 있습니다.

    제 자바 스크립트는 클라이언트 측 기술과 서버에 아무것도 할 수 없습니다. 당신은 그러나 당신이 필요로하는 정보를 반환 할 수있는 서버 측 스크립트 (예를 들어, PHP)를 호출하는 AJAX를 사용할 수 있습니다.

    당신이 AJAX를 사용하려면, 가장 쉬운 방법은 jQuery를 활용하는 것입니다 :

    $.post("someScript.php", function(data) {
   console.log(data); //"data" contains whatever someScript.php returned
});

  4. 4.당신이 WebSocket을을 사용하여 FTP 명령을 실행할 수 있지만, 이 클라이언트 측에 사용할 수 있도록 간단한 솔루션은 HTML 소스 코드로 서버 측 (PHP)에서했던 opendir을 사용하여 파일 및 "침을"을 나열한다.

    당신이 WebSocket을을 사용하여 FTP 명령을 실행할 수 있지만, 이 클라이언트 측에 사용할 수 있도록 간단한 솔루션은 HTML 소스 코드로 서버 측 (PHP)에서했던 opendir을 사용하여 파일 및 "침을"을 나열한다.

    다음 코드는, 그냥 할 것

    선택적 -

    PHP 파일 크기 정보 : AJAX + HEAD 요청 + 클라이언트 측에서 콘텐츠 길이에 액세스 할 수 있도록 htaccess로 규칙 : 또한 쉽게 사용 PHP의 파일 크기의 한계는 2GB를 극복 할 수 있습니다.

    <?php
  /* taken from: https://github.com/eladkarako/download.eladkarako.com */

  $path = 'resources';
  $files = [];
  $handle = @opendir('./' . $path . '/');

  while ($file = @readdir($handle)) 
    ("." !== $file && ".." !== $file) && array_push($files, $file);
  @closedir($handle);
  sort($files); //uksort($files, "strnatcasecmp");

  $files = json_encode($files);

  unset($handle,$ext,$file,$path);
?>
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container></div>
  <script>
    /* you will see (for example): 'var files = ["1.bat","1.exe","1.txt"];' if your folder containes those 1.bat 1.exe 1.txt files, it will be sorted too! :) */

    var files = <?php echo $files; ?>;

    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("\n<br/>\n");

    document.querySelector('[data-container]').innerHTML = files;
  </script>

</body>
</html>

    DOM의 결과는 다음과 같이 표시됩니다

    <html lang="en-US" dir="ltr"><head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-container="">
    <a data-ext="bat" download="1.bat" href="http://download.eladkarako.com/resources/1.bat">1.bat</a>
    <br/>
    <a data-ext="exe" download="1.exe" href="http://download.eladkarako.com/resources/1.exe">1.exe</a>
    <br/>
    <a data-ext="txt" download="1.txt" href="http://download.eladkarako.com/resources/1.txt">1.txt</a>
    <br/>
  </div>
  <script>
    var files = ["1.bat","1.exe","1.txt"];

    files = files.map(function(file){
      return '<a data-ext="##EXT##" download="##FILE##" href="http://download.eladkarako.com/resources/##FILE##">##FILE##</a>'
        .replace(/##FILE##/g,       file)
        .replace(/##EXT##/g,        file.split('.').slice(-1) )
        ;
    }).join("\n<br/>\n");

    document.querySelector('[data-container').innerHTML = files;
  </script>


</body></html>

  5. 5.많은 트릭이 작동하지만, Ajax 요청은 19 자에서 파일 이름을 분할? 볼 수있는 아약스 요청의 출력에서 ​​봐 :

    많은 트릭이 작동하지만, Ajax 요청은 19 자에서 파일 이름을 분할? 볼 수있는 아약스 요청의 출력에서 ​​봐 :

    파일 이름은 HREF 속성에 가서 좋아하지만 $ (이) .attr ( "HREF") 사용 은 분할 파일 이름 를

    $ (데이터) .find 그래서 ( "A는 : 포함 (.JPG)") 확장을 감지 할 수 없습니다.

    나는이 유용 희망

  6. 6.이럴, Edizkan 아딜 아타의 아이디어는 실제로 가장 적절한 방법입니다. 그것은 앵커 태그의 URL을 추출하고 다른 태그를 넣습니다. 당신이 앵커를하게하지 않으려는 경우 등) (그럼 그냥 .hide 페이지 방문자가 JQuery와 나 디스플레이를 모두 볼되고 : 없음; CSS한다.

    이럴, Edizkan 아딜 아타의 아이디어는 실제로 가장 적절한 방법입니다. 그것은 앵커 태그의 URL을 추출하고 다른 태그를 넣습니다. 당신이 앵커를하게하지 않으려는 경우 등) (그럼 그냥 .hide 페이지 방문자가 JQuery와 나 디스플레이를 모두 볼되고 : 없음; CSS한다.

    또한이 같은 프리 페치 수행 할 수 있습니다 :

    <link rel="prefetch" href="imagefolder/clouds.jpg" />

    당신은 아직도 그것을 숨길 필요하지 않으며, 그 방법은 이미지의 경로를 추출 할 수 있습니다.

    7. from https://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 DOM 요소의 모든 이벤트를 바인딩 할 수 있습니다?  (0) 2020.10.20
[JQUERY] 이 세트 비동기 할 수 있습니다 : $ .getJSON 호출에 거짓  (0) 2020.10.19
[JQUERY] 어떻게 브라우저 또는 요소 스크롤을 사용하지 않도록 설정할 수 있습니다,하지만 여전히 휠 스크롤을 허용하거나 화살표 키를?  (0) 2020.10.19
[JQUERY] 왜 jQuery를 클릭 기능이 작동하지 않습니다?  (0) 2020.10.19
[JQUERY] 어떻게 CSS3 / 자바 스크립트와 스타일 "입력 파일"에? [복제]  (0) 2020.10.19
,

티스토리툴바