我正在制作一個需要上傳圖片的表格，我可以在其中更改上傳的圖片，直到我提交表格
function previewImage() {
var thisElement = event.target
var file = thisElement.files;
var fileReader = new FileReader();
fileReader.onload = function(event) {
thisElement.nextElementSibling.setAttribute("src", event.target.result);
}
thisElement.style.display = 'none';
fileReader.readAsDataURL(file[0])
};<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<img id="display1"><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<img id="display2"><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<img id="display3"><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<img id="display4"><br>我想更改上傳的檔案，但上傳檔案后無法更改
uj5u.com熱心網友回復：
選擇檔案后，只需洗掉隱藏檔案輸入的這一行：
thisElement.style.display = 'none';
uj5u.com熱心網友回復：
我會這樣做：
- 將每個影像包裝在 a
<label>中以獲取相關輸入 - 更新您的影像加載事件以專門使用
nextElementSibling.querySelector("img") - 當用戶取消檔案選擇時，將其包裹
fileReader.readAsDataURL(file[0])起來if以避免錯誤。
這樣，您可以在第一次設定后單擊影像進行更改。
function previewImage() {
var thisElement = event.target
var file = thisElement.files;
var fileReader = new FileReader();
fileReader.onload = function(event) {
thisElement.nextElementSibling.querySelector("img").setAttribute("src", event.target.result);
}
thisElement.style.display = 'none';
if (file.length) {
fileReader.readAsDataURL(file[0])
}
};<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<label for="file1"><img id="display1"></label><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<label for="file2"><img id="display2"></label><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<label for="file3"><img id="display3"></label><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<label for="file4"><img id="display4"></label><br>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/491310.html
標籤：javascript
上一篇：如何從子組件呼叫父組件的方法？