使用 jquery 验证引擎插件时输入 type="file" 不发送文件

Posted 2023-05-09

【中文标题】使用 jquery 验证引擎插件时输入 type="file" 不发送文件

【英文标题】：Input type="file" dont send files when using the jquery validation engine plugin

【发布时间】：2014-07-19 07:43:01

【问题描述】：

我使用jQuery-Validation-Engine Plugin 来验证我的html 表单。所有验证都很好，但是当我尝试使用输入类型 =“文件”发送文件（图像）时遇到一个问题。在我的表单中，我有许多文本字段、选择和两个输入字段，用于文件选择和通过电子邮件发送。如果没有验证插件，所有工作都很好 - 来自其他字段的文件和数据被发送到电子邮件。但是当我使用插件时，只会发送来自文本字段和选择的数据。

这是我的文件附件的 php 代码处理程序

// PHOTO ATTACHMENT

$mime_boundary="==Multipart_Boundary_x".md5(mt_rand())."x";

    $headers = "From: $fromEmail\r\n" .
    "MIME-Version: 1.0\r\n" .
       "Content-Type: multipart/mixed;\r\n" .
       " boundary=\"$mime_boundary\"";

    $message = "This is a multi-part message in MIME format.\n\n" .
       "--$mime_boundary\n" .
       "Content-Type: text/html; charset=\"iso-8859-1\"\n" .
       "Content-Transfer-Encoding: 7bit\n\n" .
    $message . "\n\n";

    foreach($_FILES as $userfile)
    
       $tmp_name = $userfile['tmp_name'];
       $type = $userfile['type'];
       $name = $userfile['name'];
       $size = $userfile['size'];

       if (file_exists($tmp_name))
       
          if(is_uploaded_file($tmp_name))
          
             $file = fopen($tmp_name,'rb');

             $data = fread($file,filesize($tmp_name));

             fclose($file);


             $data = chunk_split(base64_encode($data));
          

          $message .= "--$mime_boundary\n" .
             "Content-Type: $type;\n" .
             " name=\"$name\"\n" .
             "Content-Disposition: attachment;\n" .
             " filename=\"$fileatt_name\"\n" .
             "Content-Transfer-Encoding: base64\n\n" .
          $data . "\n\n";
       
    

    $message.="--$mime_boundary--\n";

这是我用于 jQuery-Validation-Engine Plugin 初始化的 javascript 代码

    function initContactForm() 
    // Hide status on contact page
    $('#success, #error').css('display', 'none');

    // Submitting contact form
    if ($('form#contact-form').length > 0) 

        var contactForm = $('form#contact-form');
        contactForm.submit(function() 

            $('#success').css('display', 'none');
            $('#error').css('display', 'none');

            if (contactForm.validationEngine('validate')) 

                $submitButton = $(this).find('input[type="submit"]');
                $submitButton.removeClass().addClass('flat button fullwidth disabled');
                $submitButton.attr('value', 'Submitting...');
                $submitButton.attr('disabled', 'disabled');

                $.ajax(
                    type : 'POST',
                    url : 'emailSend.php',
                    data : contactForm.serialize(),
                    success : function(result) 

                        if (result == 'true') 
                            contactForm.stop().animate(
                                opacity : '1'
                            , 400, function() 

                                $submitButton = $(this).find('input[type="submit"]');
                                $submitButton.removeClass().addClass('flat button fullwidth disabled');
                                $submitButton.attr('value', 'Submitted');
                                $submitButton.attr('disabled', 'disabled');

                                contactForm.css('display', 'block');
                                $('#success').css('display', 'block');
                                $('#success').stop().animate(
                                    opacity : '1'
                                , 900);
                            );

                         else 
                            $('#error').css('display', 'block');
                            $('#error').stop().animate(
                                opacity : '1'
                            , 1000);

                            alert('Error Message: ' + result);
                        

                    ,
                    error : function(xmlHttpRequest, textStatus, errorThrown) 
                        $('#error').css('display', 'block');
                        $('#error').stop().animate(
                            opacity : '1'
                        , 1000);

                        alert(errorThrown);
                    
                );
                return false;
            
        );

    

【参考方案1】：

在谷歌搜索一天后，我找到了我的解决方案。问题是我们可以在 .ajax() 中使用 .serialize() 来收集文件数据。而不是我使用 new FormData(this)。这是我的 ajax 工作代码

$.ajax(
type : 'POST',
url : 'emailSend.php',
data : new FormData(this),
processData: false,
contentType: false,
success : function(result) 
...

这是一篇对我有帮助的文章 http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/