javascript type=fileの内容をクリアする
- 作成日 2020.12.30
- 更新日 2022.10.13
- javascript
- javascript
javascriptで、type=fileの内容をクリアするサンプルコードを記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 106.0.5249.103
クリア方法
「value」を空にすることでクリア可能です。
<input type="file" id="f">
<button id="btn">clear</button>
<script>
const obj = document.getElementById('f');
document.getElementById("btn").addEventListener("click", function(){
obj.value = '';
})
</script>実行結果
存在チェック
存在しない要素を指定するとエラーとなります。
<input type="file" id="f">
<button id="btn">clear</button>
<script>
const obj = document.getElementById('no');
document.getElementById("btn").addEventListener("click", function(){
obj.value = '';
// Uncaught TypeError: Cannot set properties of null (setting 'value')
})
</script>存在チェックを行うとエラーは回避できます。
const obj = document.getElementById('f');
document.getElementById("btn").addEventListener("click", function(){
if(obj !== null){
obj.value = '';
}
})複数の要素を一括でクリア
例えば「name」名を指定して、一括でクリアする場合は以下のように「forEach」を使用します。
※「NodeList」は「forEach」が使用できます。
<input type="date" id="setDate" name="bar">
<input type="date" id="setDate" name="bar">
<input type="date" id="setDate" name="bar">
<button id="btn" onclick="dateclear()">clear</button>
</div>
<script>
function dateclear(){
const arr = document.getElementsByName("bar");
if(arr !== null){
arr.forEach(function(v){ v.value = '' })
}
}
</script>実行結果
コード簡潔化
「document.getElementById」を省略し、「id」名のみを指定して簡潔に記述することもできます。
<input type="file" id="f">
<button id="btn">clear</button>
<script>
btn.addEventListener("click", function(){
f.value = '';
})
</script>サンプルコード
以下は、
「クリア」ボタンをクリックすると、選択したファイルの内容をクリアする
サンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
function hoge() {
// file要素を取得
let obj = document.getElementById('f');
// クリア
obj.value = '';
}
window.onload = function () {
// ボタンを取得
let elmbtn = document.getElementById('btn');
// クリックイベントを登録
elmbtn.onclick = function () {
hoge();
};
}
</script>
<body>
<div class="main">
<div class="form-file">
<input type="file" id="f">
</div>
<button id="btn" type="button" class="btn btn-primary">
クリア
</button>
</div>
</body>
</html>ファイルの内容がクリアされていることが確認できます。
コード簡潔化
アロー関数や、document.getElementByIdを省略して、以下のように簡潔に記述することも可能です。
<script>
// アロー関数
const hoge = () => {
// document.getElementById省略
f.value = '';
}
// アロー関数
window.onload = () => {
// document.getElementById省略
btn.onclick = () => { hoge() };
}
</script>
