代码是项目截取的（项目已用其他方案实现需求），没有后端数据不能直接跑起来，可以参考一下。有不懂的可联系，酌情帮忙解答。
html 代码
<ul onselectstart="return false" style="overflow: auto;list-style-type:none;" class="mb-3" id="HistoryImageFile_select"></ul>JavaScript 代码
<script>
//get フォルダのファイルリスト
function HistoryImageFunction(pathUrl, isSave) {
let selectDom = document.getElementById('HistoryImageFile_select');
let HistoryImageSave = document.getElementById("HistoryImageSave");
if (isSave) {
document.getElementById("HistoryImage_exampleModalLabel").innerText = "ファイル保存";
document.getElementById("HistoryImageSaveBtn").innerText = "保存";
selectDom.style.height = "200px";
HistoryImageSave.hidden = false;
} else {
document.getElementById("HistoryImage_exampleModalLabel").innerText = "ファイル選択";
document.getElementById("HistoryImageSaveBtn").innerText = "確認";
selectDom.style.height = "400px";
HistoryImageSave.hidden = true;
}
liAll.length = 0; //mousedown臨時配列をクリア
selectDom.innerHTML = "";
document.getElementById("HistoryImage-information").innerText = "";
document.getElementById("HistoryImagePath").value = pathUrl;
//ajax
$.ajax({
url: `getFolderFileNames.php?${pathUrl}`,
dataType: "json",
success: function(data) {
let imgBits = <?php echo ($color ? '24' : '8') ?>;
// let str = `
// <li value="back" bits="folder" fullname="#back" ondblclick="HistoryPath(this.getAttribute(\'fullname\'),'${pathUrl}',${isSave})">
// <span style="width:500px;float: left;">..</span>
// <span style="width:200px;"></span>
// </li>`;
let str = `
<li value="back" bits="folder" fullname="#back" ondblclick="HistoryPath(this.getAttribute(\'fullname\'),'${pathUrl}',${isSave})">
..
</li>`;
for (let i = 0; i < data.length; i++) {
if (data[i]['bits'] == 'folder') {
str += `
<li id="HistoryImageId${i}" value="${i}" bits="${data[i]['bits']}" fullname="${data[i]['fullname']}" ondblclick="HistoryPath(this.getAttribute(\'fullname\'),'${pathUrl}',${isSave})">
<span style="width:350px;float: left;">${data[i]['name']}</span>
<span style="width:150px;float: left;">DIR</span>
<span style="width:200px;">${data[i]['time']}</span>
</li>`;
}
if (imgBits == data[i]['bits']) {
str += `
<li id="HistoryImageId${i}" value="${i}" bits="${data[i]['bits']}" fullname="${data[i]['fullname']}" >
<span style="width:500px;float: left;">${data[i]['name']}</span>
<span style="width:200px;">${data[i]['time']}</span>
</li>`;
}
}
selectDom.innerHTML = str;
selectDom.onmousedown = getSelValMouseDown;
selectDom.onmouseup = getSelValMouseUp;
if (isSave) {
selectDom.onmousemove = null;
selectDom.onmouseout = null;
} else {
selectDom.onmousemove = getSelValMouseMove;
selectDom.onmouseout = getSelValMouseOut;
}
}
});
}
//根据fullname访问路径
function HistoryPath(fullname, pathUrl, isSave) {
// console.log(`pathUrl`, pathUrl)
if (fullname == '#back') {
let lastInde = pathUrl.lastIndexOf('/');
let newPath = pathUrl.substring(0, lastInde);
HistoryImageFunction(newPath, isSave)
} else {
HistoryImageFunction(`${pathUrl}/${fullname}`, isSave)
}
}
const liAll = []; //臨時配列
const rerunFileNameAll = [];
var isSelMouerdown = false; //マウス押す
//mousedown
function getSelValMouseDown(e) {
let li = e.path[1]; //マウス押し<li>
let liVal = li.getAttribute("value");
let fullname = li.getAttribute("fullname");
isSelMouerdown = true;
//前の選択タイトルをクリア
for (let i = 0; i < liAll.length; i++) {
if (liAll[i]) {
document.getElementById(`HistoryImageId${liAll[i]}`).classList.remove("HistoryImageCssSelect");
}
}
if (liVal == "back") {
liAll.length = 0;
rerunFileNameAll.length = 0;
} else {
if (liVal) {
//臨時配列クリア
liAll.length = 0;
rerunFileNameAll.length = 0;
//追加状態
liAll.push(liVal);
rerunFileNameAll.push(fullname);
document.getElementById(`HistoryImageId${liVal}`).classList.add("HistoryImageCssSelect");
} else {
// console.log(`mousedown null`)
}
// console.log(`mousedown`, liVal)
}
// if (e.button == 0) {
// console.log("你点了左键")
// } else if (e.button == 1) {
// console.log("你点了滚轮")
// } else if (e.button == 2) {
// console.log("你点了右键")
// }
}
//mousemove
function getSelValMouseMove(e) {
if (isSelMouerdown) {
let liVal = e.path[1].getAttribute("value");
let fullname = e.path[1].getAttribute("fullname");
if (liVal != "back") {
if (!liAll.includes(liVal)) {
if (liVal) {
liAll.push(liVal);
rerunFileNameAll.push(fullname);
document.getElementById(`HistoryImageId${liVal}`).classList.add("HistoryImageCssSelect");
} else {
// console.log(`mousemove null`)
}
}
// console.log(`mousemove`, liVal)
}
}
}
//mouseup
function getSelValMouseUp(e) {
if (isSelMouerdown) {
isSelMouerdown = false;
let HistoryImageSave = document.getElementById("HistoryImageSave");
if (!HistoryImageSave.hidden) {
document.getElementById("HistoryImageSave_fileName").value = rerunFileNameAll[0];
HistoryImageSave_fileName_input();
}
}
}
//mouseout
function getSelValMouseOut(e) {
if (isSelMouerdown) {
//マウスが特定範囲に超える
let dom = document.getElementById('HistoryImageFile_select').getBoundingClientRect();
let mx = e.pageX,
my = e.pageY,
left = dom.left + 5,
top = dom.top + 5,
right = dom.right - 10,
bottom = dom.bottom - 10;
if (mx < left || my < top || mx > right || my > bottom) {
isSelMouerdown = false;
}
// console.log(left, top, right, bottom)
// console.log(e.pageX, e.pageY)
}
}
//保存ファイル名の制御
function HistoryImageSave_fileName_input() {
let control = document.getElementById("HistoryImageSave_fileName_control").value;
if (control == 0) {
//
} else if (control == 1) {
//
} else {
//
}
let fn = document.getElementById("HistoryImageSave_fileName");
let fileName = fn.value;
//ファイル名の長さ判断
let strlen = 0;
let newfileName = "";
for (let i = 0; i < fileName.length; i++) {
let c = fileName.charCodeAt(i);
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
strlen++;
} else {
strlen += 3;
}
//33文字まで保存する
if (strlen < 33) {
newfileName += fileName.charAt(i);
} else {
strlen = 32;
}
}
fn.value = newfileName;
document.getElementById("HistoryImageSave_fileName_num").innerText = strlen;
}
function click_GetHistoryImage() {
let HistoryImageSave = document.getElementById("HistoryImageSave");
let rerunFileNameString = document.getElementById("HistoryImagePath").value + "&";
if (HistoryImageSave.hidden) { //履歴画像読み込み
let file_max = rerunFileNameAll.length;
if (file_max > 2000) {
file_max = 2000;
}
for (let i = 0; i < file_max; i++) {
rerunFileNameString += rerunFileNameAll[i] + "&";
}
document.getElementById('rerun_select_name').value = rerunFileNameString;
// console.log(`rerunFileNameString`, rerunFileNameString)
set_data_common('32');
} else { //履歴画像保存
set_data_common('41');
}
}
</script>