我有一個簡單的<input>，它接受多個檔案作為上傳。
問題是這樣的。對于每一個上傳的檔案（在我的例子中是圖片），我還添加了一個<select>標簽，用于選擇該圖片的寬度和高度，例如，我首先選擇了5張圖片，并從< 選擇> 選項，我想添加另一張圖片，問題來了，在添加另一張圖片后，<選擇>標簽 選項值被重繪 回之前添加的每一張圖片的默認值。
function loadFiles(event) {
let imagesSection = document.getElementById("images-section") 。
for (let i = 0; i < event.files.length; i ) {
let image = new Image() 。
image.src = URL.createObjectURL（event.files[i]）。
imagesSection.innerHTML =
"<div class="image-frame">" =
"<img src="" image.src " ">"
"<select id="image-options-" i " name="size" id="image-size" required> "
"<option value=" selected disabled hidden>select size</option>"
"<option value=" disabled>horizontal</option>"
"<option value="w10h15">10cm x 15cm</option>"
"<option value="w13h15">13cm x 18cm</option> "
"<option value="w20h15">20cm x 25cm</option> "
"<option value="w20h15">20cm x 30cm</option> "
"<option value="" disabled> vertical</option>"
"<option value="w15h10">15cm x 10cm</option>"
"<option value="w18h13">18cm x 13cm</option> "
"<option value="w25h20">25cm x 20cm</option> "
"<option value="w30h20">30cm x 20cm</option> "
"</select>"
"</div>"。
//console.log（event.files[i]）;
};<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="styleheet" href="root. css">
<title>Images</title>
</head>/span>
<body>
<div class="container">
<div class="print-section"/span>>
<div id="images-section" class="images-section"> </div>>
<div class="upload-section">/span>
< input id="files-input" type="file" name="files" accept="image/*"/span> multiple onchange="loadFiles(this)" value=" />
</div>
</div>/span>
</div>/span>
</body>
</html>/span>是否有辦法在不重新上傳之前的檔案的情況下進行新的上傳，從而使width x height被保存？如果沒有，我的最佳猜測是嘗試添加一個陣列來保存選項值，然后在另一次上傳后將它們分別添加到每個圖片上。
uj5u.com熱心網友回復：
這就是為什么你不應該使用imagesSection.innerHTML =的一個原因。
這里發生的事情是當前的DOM被轉換為HTML，然后與你想要添加的字串相連接，并再次決議為DOM。在這一步中，所有在DOM中表現為狀態的東西都會丟失，比如輸入元素的值、事件監聽器......
new Image已經創建了一個ImageElement，可以被添加到DOM中。使用
createElement和appendChild你也應該避免使用
onchange="loadFiles(this)"使用addEventListener代替你有兩個
id用于你的select，并且ids必須是唯一的，使用iod的for回圈將不會產生一個唯一的id。
function createSizeSelectElement(id) {
let select = document.createElement('select')
//名字對一個表單來說應該是唯一的。
select.name = "size"
//你有兩次id，id必須是唯一的。
// select.id="image-options-" id
// select.id = "image-size"。
select.required = true
//在這里你也應該考慮使用一個回圈和appendChild。
select.innerHTML =
"<option value=" selected disabled hidden>select size</option>"
"<option value=" disabled>horizontal</option>"
"<option value="w10h15">10cm x 15cm</option>"
"<option value="w13h15">13cm x 18cm</option> "
"<option value="w20h15">20cm x 25cm</option> "
"<option value="w20h15">20cm x 30cm</option> "
"<option value="" disabled> vertical</option>"
"<option value="w15h10">15cm x 10cm</option>"
"<option value="w18h13">18cm x 13cm</option> "
"<option value="w25h20">25cm x 20cm</option> "
"<option value="w30h20">30cm x 20cm</option>"
return選擇
}
function loadFiles（event） {
let imagesSection = document.getElementById("images-section"/span>)。
for (let i = 0; i < event. target.files.length; i ) {
let image = new Image() 。
image.src = URL. createObjectURL( event.target.files[i])。
let info = document.createElement('div'/span>)
info.classList.add('image-frame')
info.appendChild(image)
info.appendChild(createSizeSelectElement(i))
imagesSection.appendChild(info)
}
}
document.getElementById('files-input') 。 addEventListener('change',loadFiles) <div class="container"> /span>
<div class="print-section"/span>>
<div id="images-section" class="images-section"> </div>>
<div class="upload-section">/span>
< input id="files-input" 型別="檔案" 名稱="files" accept="image/*" multiple value=" />
</div>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/321672.html
標籤：