HTML如下-
<input type="file" class="custom-file-input" accept="image/*" onchange="loadFile(event)" id="customFile">
<label class="custom-file-label" id="change" for="customFile">Choose File</label><br><br>
<img width="150px" id="output" src="#"/>
腳本如下-
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
};
我的代碼能夠顯示選定的影像，但我也想將標簽文本更改為選定的影像名稱
uj5u.com熱心網友回復：
更改標簽文本的邏輯可以寫在更改事件上。檢查以下事件片段，
document.getElementById('customFile').onchange = function() {
// code to change the label text
var fullName = getFileName(document.getElementById('customFile').value);
document.getElementById("change").innerHTML= fullName;
};
var getFileName = function(fullPath) {
if (!fullPath) return null;
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
return filename.substring(1);
}
return null;
}
有關獲取檔案名的更多輸入，請檢查https://stackoverflow.com/a/857662/17542117
uj5u.com熱心網友回復：
Var name = document.getElementById("customFile").value;
利用
document.getElementById("Change").innerHTML = name
請更正拼寫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/403786.html
標籤：