表单提交时检查文件类型？ [英] Check file type when form submit?

问题描述

 < form onsubmit =return checkcreateform（）action = / gallery / createmethod =postenctype =multipart / form-data> 
< label>类型：*< / label> 
< label for =type-1> 
< input type =radiochecked =checkedvalue =1id =type-1name =type> Image 
< / label> 
< br> 
< label for =type-2> 
< input type =radiovalue =2id =type-2name =type> Video 
< / label> 
< label class =itemdetailfloatL requiredfor =file>文件：*< / label> 
< input type =hiddenid =MAX_FILE_SIZEvalue =8388608name =MAX_FILE_SIZE> 
< input type =filetabindex =5class =text-size textid =filename =file> 
< input type =submitvalue =Createid =submitname =submit> 
< / form> 
  

我想在表单提交之前进行验证。这里我怎么可以验证，如果用户选择类型为图像和上传视频或选择类型为视频和上传图像？

我们可以通过javascript或jquery.Any快速的方法验证这个？

请帮助我解决这个问题。

解决方案

而不是使用 onsubmit ，使用jQuery的提交处理程序，并使用如下所示的JavaScript进行验证：

  function getExtension（filename）{
 var parts = filename.split（'。'）; 
 return parts [parts.length  -  1]; 
 
 
函数isImage（文件名）{
 var ext = getExtension（filename）; 
 switch（ext.toLowerCase（））{
 case'jpg'：
 case'gif'：
 case'bmp'：
'png'：
 // etc 
返回true; 
} 
返回false; 
 
 
函数isVideo（filename）{
 var ext = getExtension（filename）; 
 switch（ext.toLowerCase（））{
 case'm4v'：
 case'avi'：
 case'mpg'：
 case'mp4'：
 // etc 
返回true; 
} 
返回false; 
 
 
 $（function（）{
 $（'form'）。submit（function（）{
 function failValidation（msg）{
 alert（msg）; //现在只是一个警报，但你可以稍后加香料
返回false; 
} 
 
 var file = $（'＃file'）; 
 var imageChosen = $（'＃type-1'）。is（'：checked'）; 
 if（imageChosen&&！isImage（file.val（）））{
返回failValidation（'请选择一个有效的图像'）; 
} 
否则if（！imageChosen&&！isVideo（file.val（）））{
 return failValidation（'请选择一个有效的视频文件'）; 
} 
 
 //在这一点上的成功
 //表示现在成功提醒
 alert（'Valid file ！）; 
返回false; //防止表单提交 - 在你的环境中删除
}这里是你返回true的地方，允许表单正常提交。 ）; 
 
}）; jsFiddle版本在这里经过IE8，RockMelt（基于Chrome）和Firefox 7的测试： http://jsfiddle.net/Ngrbj/4/   
I have the form having the follwing fields,
<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data">
   <label>Type:*</label>
    <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
   <br>
   <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
   </label>  
   <label class="itemdetailfloatL required" for="file">File:*</label>
   <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
   <input type="file" tabindex="5" class="text-size text" id="file" name="file">
 <input type="submit" value="Create" id="submit" name="submit">
</form>
I want to validate before form submit. Here how can  i validate if user select type as Image and upload video or select type as video and upload image ?

We can achieve this by javascript or jquery.Any quick way to validate this ?

Kindly help me on this.
解决方案
Instead of using onsubmit, use jQuery's submit handler, and validate using some javascript like the following:
function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];
}

function isImage(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'jpg':
    case 'gif':
    case 'bmp':
    case 'png':
        //etc
        return true;
    }
    return false;
}

function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mpg':
    case 'mp4':
        // etc
        return true;
    }
    return false;
}

$(function() {
    $('form').submit(function() {
        function failValidation(msg) {
            alert(msg); // just an alert for now but you can spice this up later
            return false;
        }

        var file = $('#file');
        var imageChosen = $('#type-1').is(':checked');
        if (imageChosen && !isImage(file.val())) {
            return failValidation('Please select a valid image');
        }
        else if (!imageChosen && !isVideo(file.val())) {
            return failValidation('Please select a valid video file.');
        }

        // success at this point
        // indicate success with alert for now
        alert('Valid file! Here is where you would return true to allow the form to submit normally.');
        return false; // prevent form submitting anyway - remove this in your environment
    });

});
jsFiddle version here, tested in IE8, RockMelt (based on Chrome) and Firefox 7: http://jsfiddle.net/Ngrbj/4/

                        
这篇关于表单提交时检查文件类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！