doulu8415
2014-06-06 07:45 阅读 41

输入type = file没有使用Jquery Validation Plugin传递给php页面

I have a html form with file upload functionality which I want to validate using jquery plugin. Now if the file is empty then it's showing an error message, but if the file is different extension then it should show the message "File type is not allowed" but it seems it's not passed to the file filecheck.php page which would validate the file type.

How can I validate this file type using this jquery plugin ? Can you help me plz ? Thanks.

Html part:

<div id="result"></div> <!--error or success message will be show here-->

<form action="editContactDetails.php" method="post" enctype="multipart/form-data" id="all_contact_details">
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
    <td></td>
  </tr>
</form>

Jquery part:

$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#all_contact_details").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', false); 
            },
            success: function(response) {
            $('#result').html(response);
            //$(form).find('div').hide();
            $(form).hide();

            }            
        });
    },

        rules: {            
            file1: {
                    required: true,                    
                    remote: {
                        url: "filecheck.php",
                        type: "post"
                     }
                },

        },
        messages: {         
            file1: {
                    required: "Upload your file",                    
                    remote: "File is not allowed"
                },          
        }
    });

});

Php part (filecheck.php)

<?php
$file1 =  $_FILES['file1']['name']; 
$allowedExts = array("jpg");    
$temp = stripslashes($file1);
$temp = explode(".", $temp);
$extension = end($temp);    

if(!in_array($extension, $allowedExts))
    echo 'false';
else
    echo 'true';        
?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    doxp30826 doxp30826 2014-06-06 08:10

    The SubmitHandler handles the actual submit when the form is valid:
    http://jqueryvalidation.org/validate/#submithandler

    So this won't validate the file extension itself.

    You can however use the extension validator built into jqueryvalidation which will do exactly what you are trying to achive. See this link for reference and for examples:

    http://jqueryvalidation.org/extension-method/

    点赞 评论 复制链接分享
  • douyu7879 douyu7879 2014-06-06 08:34

    Before trying any harder, it is not supported by all browsers to submit a file with AJAX. You can however do a trick which is actually submitting the form to a target iframe and then using javascript to read the contents of that iframe and show/use them somehow. This way you actually submitted the form without refreshing the main window.

    This article quite covers it: Ajax: a simplified version of file upload form using IFRAME

    点赞 评论 复制链接分享

相关推荐