Helpex - Trao đổi & giúp đỡ Đăng nhập
59

Tôi có một thư mục có tên là "hình ảnh" trong cùng thư mục với tệp .js của tôi. Tôi muốn tải tất cả hình ảnh từ thư mục "images" vào trang html của mình bằng cách sử dụng Jquery / Javascript.

Vì tên của các hình ảnh không phải là một số số nguyên liên tiếp, tôi phải làm thế nào để tải những hình ảnh này?

59 hữu ích 3 bình luận 228k xem chia sẻ
14 trả lời 14
70

Hoạt động cả localhost và trên máy chủ trực tiếp mà không gặp sự cố, đồng thời cho phép bạn mở rộng danh sách được phân tách các phần mở rộng tệp được phép:

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 +"'>" );
            } 
        });
    }
});

ĐỂ Ý

Máy chủ Apache đã được Option Indexesbật theo mặc định - nếu bạn sử dụng một máy chủ khác như Express for Node, bạn có thể sử dụng gói NPM này để hoạt động ở trên: https://github.com/expressjs/serve-index

Nếu các tệp bạn muốn liệt kê nằm trong /imageshơn bên trong server.js của bạn, bạn có thể thêm một số thứ như:

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')));
70 hữu ích 5 bình luận chia sẻ
51

Sử dụng :

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 + "'>");
        });
    }
});

Nếu bạn có các phần mở rộng khác, bạn có thể tạo nó thành một mảng và sau đó đi qua từng phần mở rộng đó bằng cách sử dụng in_array().

Ps: Mã nguồn trên không được kiểm tra.

51 hữu ích 5 bình luận chia sẻ
10

Đây là cách để thêm nhiều phạm vi tệp hơn, trong ví dụ được đưa ra bởi Roy MJ ở đầu trang này.

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   

Trong ví dụ này, tôi đã thêm nhiều chứa hơn.

10 hữu ích 1 bình luận chia sẻ
6

Đây là một cách để làm điều đó. Cũng liên quan đến việc thực hiện một chút PHP.

Phần PHP:

$filenameArray = [];

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

echo json_encode($filenameArray);

Phần jQuery:

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

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

Vì vậy, về cơ bản, bạn thực hiện một tệp PHP để trả lại cho bạn danh sách các tên tệp hình ảnh dưới dạng JSON, lấy JSON đó bằng cách gọi ajax và thêm / nối chúng vào html. Bạn có thể muốn lọc các tệp bạn lấy từ thư mục.

Đã có một số trợ giúp về phần php từ 1

6 hữu ích 0 bình luận chia sẻ
6

Nếu quan tâm đến việc làm điều này mà không có jQuery - đây là một biến thể JS thuần túy ( từ đây ) của câu trả lời hiện được ủng hộ nhiều nhất:

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 hữu ích 0 bình luận chia sẻ
2

Nếu, như trong trường hợp của tôi, bạn muốn tải các hình ảnh từ một thư mục cục bộ trên máy của riêng mình, thì có một cách đơn giản để thực hiện điều đó với một tệp loạt Windows rất ngắn. Điều này sử dụng khả năng gửi đầu ra của bất kỳ lệnh nào tới tệp bằng cách sử dụng> (để ghi đè tệp) và >> (để nối vào tệp).

Về khả năng, bạn có thể xuất danh sách tên tệp thành tệp văn bản thuần túy như sau:

dir /B > filenames.txt

Tuy nhiên, việc đọc trong một tệp văn bản đòi hỏi nhiều rắc rối hơn, vì vậy tôi xuất ra một tệp javascript để thay thế, tệp này sau đó có thể được tải trong tệp của bạn để tạo một biến toàn cục với tất cả các tên tệp trong đó.

echo var g_FOLDER_CONTENTS = mlString(function() { /*! > folder_contents.js
dir /B images >> folder_contents.js
echo */}); >> folder_contents.js

Lý do cho chức năng kỳ lạ với chú thích bên trong ký hiệu là để vượt qua giới hạn về chuỗi nhiều dòng trong Javascript. Đầu ra của lệnh dir không thể được định dạng để viết một chuỗi chính xác, vì vậy tôi đã tìm thấy một giải pháp thay thế ở đây .

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

Thêm điều này vào mã chính của bạn trước khi chạy tệp javascript được tạo, và sau đó bạn sẽ có một biến toàn cục được gọi là g_FOLDER_CONTENTS, là một chuỗi chứa đầu ra từ lệnh dir. Sau đó, điều này có thể được mã hóa và bạn sẽ có một danh sách các tên tệp, với đó bạn có thể làm những gì bạn thích.

var filenames = g_FOLDER_CONTENTS.match(/\S+/g);

Đây là một ví dụ về tất cả được tổng hợp lại với nhau: image_loader.zip

Trong ví dụ, run.bat tạo tệp Javascript và mở index.html, vì vậy bạn không cần phải tự mở index.html.

LƯU Ý : .bat là một loại thực thi trong Windows, vì vậy hãy mở chúng trong trình soạn thảo văn bản trước khi chạy nếu bạn đang tải xuống từ một số liên kết internet ngẫu nhiên như liên kết này.

Nếu bạn đang chạy Linux hoặc OSX, bạn có thể làm điều gì đó tương tự như tệp loạt và tạo ra một chuỗi javascript được định dạng chính xác mà không có bất kỳ lỗi nào về mlString.

2 hữu ích 1 bình luận chia sẻ
2
$(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();
    };
  });   
});

Đối với kịch bản này, tôi đã đặt tên cho tập tin hình ảnh của tôi trong một thư mục như 1.jpg, 2.jpg, 3.jpg, ... để 13.jpg.

Bạn có thể thay đổi tên thư mục và tệp theo ý muốn.

2 hữu ích 1 bình luận chia sẻ
1

Dựa trên câu trả lời của Roko C. Buljan, tôi đã tạo phương pháp này để lấy hình ảnh từ một thư mục và các thư mục con của nó . Điều này có thể cần một số xử lý lỗi nhưng hoạt động tốt đối với cấu trúc thư mục đơn giản.

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
    });
}
1 hữu ích 0 bình luận chia sẻ
0

Bạn không thể làm điều này một cách tự động. JS của bạn không thể nhìn thấy các tệp trong cùng thư mục với nó.

Dễ dàng nhất có lẽ là cung cấp danh sách các tên hình ảnh đó cho JavaScript của bạn.

Nếu không, bạn có thể tìm nạp danh sách thư mục từ máy chủ web bằng JS và phân tích cú pháp nó để có được danh sách hình ảnh.

0 hữu ích 0 bình luận chia sẻ
0

Trong jQuery, bạn có thể sử dụng Ajax để gọi một tập lệnh phía máy chủ. Tập lệnh phía máy chủ sẽ tìm tất cả các tệp trong thư mục và trả chúng về tệp html của bạn, nơi bạn sẽ cần xử lý thông tin trả về.

0 hữu ích 0 bình luận chia sẻ
0

Bạn có thể sử dụng fs.readdir hoặc fs.readdirSync phương pháp để có được những tên tập tin trong thư mục.

Sự khác biệt giữa hai phương pháp là phương thức đầu tiên không đồng bộ, vì vậy bạn phải cung cấp một hàm gọi lại sẽ được thực thi khi quá trình đọc kết thúc.

Thứ hai là đồng bộ, nó sẽ trả về mảng tên tệp, nhưng nó sẽ dừng bất kỳ quá trình thực thi nào thêm mã của bạn cho đến khi quá trình đọc kết thúc.

Sau đó, bạn chỉ cần lặp lại các tên và sử dụng hàm append, thêm chúng vào vị trí thích hợp của chúng. Để kiểm tra cách nó hoạt động, hãy xem tham chiếu HTML DOM và JS

0 hữu ích 0 bình luận chia sẻ
0

Thêm tập lệnh sau:

<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>

sau đó tạo một tệp js như sau:

var g_FOLDER_CONTENTS = mlString(function() { /*! 
1.png
2.png
3.png 
*/}); 
0 hữu ích 0 bình luận chia sẻ
0

Sử dụng Chrome, tìm kiếm tệp hình ảnh trong các liên kết (như đã đề xuất trước đó) không hoạt động vì nó đang tạo ra một cái gì đó như:

(...) 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>

Có lẽ cách đáng tin cậy nhất là làm điều gì đó như sau:

var folder = "img/";

$.ajax({
    url : folder,
    success: function (data) {
        var patt1 = /"([^"]*\.(jpe?g|png|gif))"/gi;     // extract "*.jpeg" or "*.jpg" or "*.png" or "*.gif"
        var result = data.match(patt1);
        result = result.map(function(el) { return el.replace(/"/g, ""); });     // remove double quotes (") surrounding filename+extension // TODO: do this at regex!

        var uniqueNames = [];                               // this array will help to remove duplicate images
        $.each(result, function(i, el){
            var el_url_encoded = encodeURIComponent(el);    // avoid images with same name but converted to URL encoded
            console.log("under analysis: " + el);
            if($.inArray(el, uniqueNames) === -1  &&  $.inArray(el_url_encoded, uniqueNames) === -1){
                console.log("adding " + el_url_encoded);
                uniqueNames.push(el_url_encoded);
                $("#slider").append( "<img src='" + el_url_encoded +"' alt=''>" );      // finaly add to HTML
            } else{   console.log(el_url_encoded + " already in!"); }
        });
    },
    error: function(xhr, textStatus, err) {
       alert('Error: here we go...');
       alert(textStatus);
       alert(err);
       alert("readyState: "+xhr.readyState+"\n xhrStatus: "+xhr.status);
       alert("responseText: "+xhr.responseText);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Mở rộng đoạn mã

0 hữu ích 0 bình luận chia sẻ
0

Đây là mã phù hợp với tôi, những gì tôi muốn là liệt kê các hình ảnh trực tiếp trên trang của tôi để bạn chỉ cần đặt thư mục nơi bạn có thể tìm thấy các hình ảnh chẳng hạn -> dir = "images /" Tôi thực hiện một chuỗi con var pathName = filename.substring (filename.lastIndexOf ('/') + 1); mà tôi đảm bảo chỉ mang theo tên của các tệp được liệt kê và ở cuối, tôi liên kết URL của mình để xuất bản nó trong nội dung

$ ("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>
0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript jquery html image , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading