[英]Multiple File upload validation using javascript/jQuery
只是嘗試對多個文件上傳進行基本驗證。 它僅驗證第一個文件。 我找不到我在哪里做錯了。 幫助我驗證表格。
已更新代碼的實際場景。
的HTML
<form id="img_multiple">
<div id="append">
<input type="file" name="img[]" id="img" class="img" />
</div>
<button class="add_img">Add</button>
<input type="submit" />
</form>
JS
$(document).on('click', '.add_img', function(){
var html = '';
var html = '<input type="file" name="img[]" id="img" class="img" />';
$('#append').append(html);
});
$(document).on('submit', '#img_multiple', function(e){
e.preventDefault();
if($(".img").val() != '')
{
var count_of = $(".img").get(0).files.length;
alert(count_of);
for (var i = 0; i < $(".img").get(0).files.length; ++i)
{
var img =$(".img").get(0).files[i].name;
var img_file_size=$(".img").get(0).files[i].size;
if(img_file_size<10485760)
{
var img_ext = img.split('.').pop().toLowerCase();
if($.inArray(img_ext,['jpg','jpeg','pdf','png'])===-1)
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>File ("+img+") type not allowed.</span>");
}
else
{
$('#img_err').html("");
}
}
else
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>File("+img+") size is too big.</span>");
}
}
}
else
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>Upload documents</span>");
}
});
代替id='img'
嘗試使用class='img'
,而不是#img
使用.img
。 您收到的錯誤是因為id只能在一個元素中使用,但是在這種情況下,您對3個元素使用了相同的id。
您還可以使用屬性accept="image/*"
編輯:而不是你
$(document).on('submit', '#img_multiple', function(e)
試試這個代碼
$('.img').on('change', function(){
if($(this).val() != '')
{
var count_of = $(this).get(0).files.length;
alert(count_of);
for (var i = 0; i < $(this).get(0).files.length; ++i)
{
var img =$(this).get(0).files[i].name;
var img_file_size=$(this).get(0).files[i].size;
if(img_file_size<10485760)
{
var img_ext = img.split('.').pop().toLowerCase();
if($.inArray(img_ext,['jpg','jpeg','pdf','png'])===-1)
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>File ("+img+") type not allowed.</span>");
}
else
{
$('#img_err').html("");
}
}
else
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>File("+img+") size is too big.</span>");
}
}
}
else
{
od_error = 'Yes';
$('#img_err').html("<span class='text-danger'>Upload documents</span>");
}
});
還編輯您將按鈕放置為的html代碼
<button type='button' class="add_img">Add</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.