複数の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”で同じファイルがアップロードされていないかのチェックになります。



コメントを残す