category

category

jquery

2025.7.11

2025.7.12

17

【jQuery】formの複数ある添付ファイル(input type = "file" )で同じファイル名を禁止にする方法

複数のinput type = "file"があり、もし同じ名前のファイルをアップロードしようとした場合に、禁止をアラートし、valueを空にします。

動きを確認できます↓

コード

html

<ul>
    <li><input type="file" name="file1"></li>
    <li><input type="file" name="file2"></li>
    <li><input type="file" name="file3"></li>
</ul>

jQuery

<script>
$(function(){
	$("input[type=file]").change(function(){
        var uploaded_file = $(this).prop('files')[0];
		var current_name;
		current_name = ($(this).attr('name'));//選択中のinputのname属性

		var input_files;
		var input_name;
		input_files = $('input[name='+current_name+']').parent().parent().find("input[type=file]");//他のinput(file)取得
		$.each(input_files, function(index, element) {
			input_name = $(element).attr('name');//name属性取得
			if(current_name != input_name){//自分以外
				if($('input[name='+input_name+']').val() != ''){//値がある場合
					if($('input[name='+input_name+']').prop('files')[0].name == uploaded_file.name){//同じファイル名の場合
						$('input[name='+current_name+']').val("");
						alert('同じ名前のファイルを複数アップロードできません');
					}
				}
			}
		})
	})
});
</script>

注意点

.parent().parent().find("input[type=file]")

↑jsの10行目の「親の親の中のtype=”file”を仲間として同じファイル名がないか探しています。

一つ目の親は「li」で、二つ目の親は「ul」です。

なので、同じulの中のinput type=”file”で同じファイルがアップロードされていないかのチェックになります。

909

コメント

コメントを残す

ニックネームは公開されます

CAPTCHA


閉じる