首頁猿問如何在不在 javascript...

如何在不在 javascript 中手動輸入每個圖像文件的情況下從文件夾循環圖像？

JavaScript

慕容森 2023-03-03 09:40:31

我想隨機循環文件夾中存在的所有圖像。目前，我能夠一張一張地手動輸入每張圖片并顯示出來。但我希望該功能能夠從給定的文件夾中自行顯示圖像。JSfunction rndmImg() { var qs = [ { text: "1", img: "/Images/1.png" }, { text: "2", img: "/Images/2.png", }, { text: "3", img: "/Images/3.png", }, { text: "4", img: "/Images/4.png", }, { text: "5", img: "/Images/5.png", }, ]; var q = qs[Math.floor(Math.random() * qs.length)]; document.getElementById("q").innerHTML = '<p>' + q.text + '</p>' + '<img src="' + q.img + '">'; }HTML<div id="quote"></div> <input class="Click me" style="float: left;" type="button" value="Randomize" onclick="rndmImg()">

查看完整描述

1 回答

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

因此，客戶端 JavaScript，即使在本地服務器上運行，實際上也無法訪問本地文件系統，因此典型的服務器端或命令行命令（如 readdir、cd ls 等）實際上并不存在于客戶端 JavaScript 中

話雖如此，如果它運行在某種服務器/某種靜態 http 服務器上，您應該能夠使用 XMLHttpRequest 獲取主目錄，或者獲取、讀取鏈接，然后循環遍歷圖像等

事實上，如果不首先在某種服務器上運行，客戶端 JavaScript 無法讀取任何外部文件的字節，除非它是由用戶選擇的

因此，如果您使用 pythons http_server 模塊在端口 770 上運行本地靜態服務器，例如，然后獲取文件

fetch("http://localhost:770/Images")

.then(r=>r.text())

.then(r=>{

var p=new DOMParser ()

var s=p.parseFromString(r,"text/html")

var links=Array.from(s.querySelectorAll("a"))

var fileNames= links.map(x=>x.href)

})

（假設該目錄中沒有 index.html）

話雖如此，您的文件似乎都遵循遞增一個的模式。如果它們都遵循一個已知的模式，你根本不需要服務器，你可以簡單地在 JavaScript 中動態創建新的 Image 對象，并為每個對象設置一個 onload 函數和一個 onerror 函數，只添加沒有的錯誤，或者繼續遞歸加載它們，除非其中一個有錯誤，當它有錯誤時，它會告訴你模式已經被破壞，你不需要服務器

所以假設模式是名稱遞增一個，從 1.png 開始，那么你可以在每個元素中生成一個對象數組，其中包含名稱和圖像對象本身，就像這樣

makeObjectArray (1, "Images/", ".png", it=>{

console.log(it)

})

function makeObjectArray(cur,start,end, done) {

var ar=[]

get1()

function get1() {

var im= new Image()

im.src=start+ (cur++)+end

im.onload=()=> (ar.push(im),get1())

im.onerror=()=>done (ar)

}

反對回復 2023-03-03

1 回答
0 關注
114 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在不在 javascript 中手動輸入每個圖像文件的情況下從文件夾循環圖像？

如何在不在 javascript 中手動輸入每個圖像文件的情況下從文件夾循環圖像？

1 回答

添加回答

如何在不在 javascript 中手動輸入每個圖像文件的情況下從文件夾循環圖像？