[英]How to client side realtime validate a form with select, radio, checkbox, text, file input, just use javascript?
[英]How to validate a file input on client side (Javascript)
我有一个存储在javascript变量中的表单:
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" +
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form>
现在,当您看到用户点击提交按钮时,它会提交到'startImageUpload'功能,如下所示:
function startImageUpload(imageuploadform){
$(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
$(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
sourceImageForm = imageuploadform;
return true;
}
它的作用是当用户点击提交时,它会显示一个加载栏并上传表单。
现在我的问题是我想要执行一个简单的javascript验证,当用户点击表单中的提交按钮时,它将检查文件是'png'还是'gif'文件类型。 如果文件类型正确,则显示加载栏并上传表单。 如果文件类型不正确,则显示警告,说明文件类型不正确,但不显示加载栏,也不上传表单。
有谁知道如何编码。 这样我就可以使用你的一个答案中的例子,然后对其进行扩展,并使用javascript来验证更多的文件类型和文件大小,这样如果有人可以帮助我,将会非常有帮助。
谢谢
你可以这样检查......
var validExtensions = ['png', 'gif'],
validExtensionSupplied = $.inArray(
($('.fileImage').val().match(/\.(.*?)]\s*$/) || [])[1],
validExtensions) != -1;
或者,您可以通过检查$('.fileImage').prop('files')[0].type
来按MIME类型进行验证。
function startImageUpload(imageuploadform){
var form = $(imageuploadform)
, value = form.find('.fileImage').val()
form.find('.imagef1_upload_process').css('visibility','visible')
form.find('.imagef1_upload_form').css('visibility','hidden')
if (!/\.(png|gif)$/.test(value)){
return false
}
return true
}
HTML规范也演变为包含accept
属性:
<input type="file" accept="image/png,image/gif" />
(在Chrome,Firefox和Opera中支持 - IE10,Safari 6在不久的将来)
试试这个:
$("#pic").change(function() {
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
case 'gif': case 'jpg': case 'png':
alert("an image");
break;
default:
$(this).val('');
// error message here
alert("not an image");
break;
}
});
这是我的解决方案,非常简单快捷
var accept = $(event.target).attr('accept');
//<input name='fileImage' accept='.png,.jpg,.jpeg' type='file' class='fileImage' />
value = $(event.target).val(), ext = value.substring(value.lastIndexOf('.'));
if(ext && accept.indexOf(ext) == -1){
console.log('No');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.