無法使用 javascript 設置文件輸入的值

Question

我試圖在按下按鈕時在輸入上設置一個值，問題是它拋出了一個錯誤：

InvalidStateError：嘗試使用不可用或不再可用的 object

這是我的代碼，看起來很簡單，所有這些：

document.getElementById("icon-removal-btn").onclick = function(e){
        e.preventDefault()
        let label = document.getElementById("icon-label");
        let input = document.getElementById("icon-input");        
        label.innerHTML = 'Choose File';
        input.value = 'deleted';
    }

我什至嘗試在控制台document.getElementById("icon-input").value = "deleted"但它仍然不起作用。 到底是怎么回事？ 我在這里做錯了嗎？

 document.getElementById("icon-removal-btn").onclick = function(e){ e.preventDefault() let label = document.getElementById("icon-label"); let input = document.getElementById("icon-input"); label.innerHTML = 'Choose File'; input.value = 'deleted'; }

 <div class="form-row"> <div class="form-group col"> <div class="form-control-lg input-group mt-1"> <div class="input-group-prepend"> <span class="input-group-text">Upload Icon</span> </div> <div class="custom-file"> <button class="icon-removal-button" id="icon-removal-btn">Delete</button> <input type="file" name="icon" id="icon-input" value="{{$card->icon}}" class="custom-file-input" id="inputGroupFile01"> <label class="custom-file-label" id="icon-label" for="inputGroupFile01">{{$card->icon}}</label> </div> </div> </div> </div>

Answer 1

您正在嘗試將<input type="file">的value設置為字符串。 這無法完成，因為type="file"只接受文件作為有效輸入。

請在MDN閱讀有關type="file"的更多信息。

刪除類型修復它（臨時）

 document.getElementById("icon-removal-btn").onclick = function(e){ e.preventDefault() let label = document.getElementById("icon-label"); let input = document.getElementById("icon-input"); label.innerHTML = 'Choose File'; input.value = 'deleted'; }

 <div class="form-row"> <div class="form-group col"> <div class="form-control-lg input-group mt-1"> <div class="input-group-prepend"> <span class="input-group-text">Upload Icon</span> </div> <div class="custom-file"> <button class="icon-removal-button" id="icon-removal-btn">Delete</button> <input name="icon" id="icon-input" value="{{$card->icon}}" class="custom-file-input" id="inputGroupFile01"> <label class="custom-file-label" id="icon-label" for="inputGroupFile01">{{$card->icon}}</label> </div> </div> </div> </div>

Answer 2

input.value只能在文本對象上分配文本內容（參見https://www.w3schools.com/jsref/prop_text_value.asp ）。

例如，一個<input type="text">可以分配一個value ：

 document.getElementById('test').value = 'Success.';

 <input type="text" id="test">

然而，一個<input type="file">不能有一個文本value分配給它，因為它沒有文本內容。

下面的代碼段將不起作用並引發腳本錯誤：

 document.getElementById('test').value = 'Success.';

 <input type="file" id="test">

這將導致與您遇到的相同錯誤：

InvalidStateError：嘗試使用不可用或不再可用的 object

---

更新

<input type="file">確實有一個值，但不能設置為""以外的任何值。 有關更多信息，請參閱 D. Pardal 的答案。

Answer 3

來自HTML 標准（重點是我的）：

輸入。 value [ =價值]

返回表單控件的當前值。

可以設置，改變值。

當控件是文件上傳控件時，如果它設置為空字符串以外的任何值，則引發“ InvalidStateError ” DOMException 。

因此，您不能將<input type="file">的value更改為 " ""以外的任何值。