PHP，jQuery的，阿贾克斯，发送带有附件栏code没有工作的HTML输入字段 [英] PHP, jQuery, Ajax, send HTML input fields with attachment field code not working

查看：114 发布时间：2015/11/30 0:27:46 javascript php jquery html ajax

本文介绍了PHP，jQuery的，阿贾克斯，发送带有附件栏code没有工作的HTML输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想有一个可选的附件发送一封电子邮件，一个按钮被按下时，并显示上述表单域的结果。我已经把下面的code，但它不工作（没有任何反应，当我点击提交按钮，想创建一个小提琴，但的jsfiddle不接受PHP code）：

下面是HTML：

 ＆LT; DIV ID =contactSubmitResult＆GT;＆LT; / DIV＆GT;
      ＆LT; DIV ID =contactSubmitResult＆GT;＆LT; / DIV＆GT;
      ＆LT; DIV ID =联系形式＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_firstname＆GT;名字＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_firstnameNAME =form_firstname值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_lastname＆GT;姓氏＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_lastnameNAME =form_lastname值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_address＆gt;地址＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_addressNAME =form_address值=/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_city＆GT;城市和LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_cityNAME =form_city值=/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_email＆GT;电子邮件＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=电子邮件ID =form_emailNAME =form_email值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_phone＆GT;电话＆LT;跨度类=需要与GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=电话ID =form_phoneNAME =form_phone值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;标签=form_attachment＆gt;添加附件＆LT; /标签＆gt;
          ＆LT;输入类型=文件ID =form_attachmentNAME =form_attachment/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;标签=form_message＆gt;消息＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT; textarea的ID =form_messageNAME =form_message要求＆GT;＆LT; / textarea的＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;输入类型=提交ID =form_send值=发送formnovalidate =formnovalidate/＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;

下面是JavaScript：

 ＆LT;脚本类型=文/ JavaScript的SRC =http://jdoe.com/js/jquery-1.11.1.min.js＆GT;＆LT; /脚本＆GT;

    ＆LT;！ - 验证并提交表单输入 - ＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;

  $（文件）。就绪（函数（）{

    matchFormFields =#contactForm输入[要求]，#contactForm的textarea [要求];

    matchContactSubmitResult =#contactSubmitResult;

    errorColor ='红';

    $（＃form_send）。点击（函数（）{

      VAR formIsValid = TRUE;

      //通过各个领域的循环，改变边框颜色为红色无效的领域

      $（matchFormFields）。每个（函数（）{

        $（本）的CSS（'边框颜色'，''）;

        //检查是否字段为空

        如果（！$。修剪（$（本）.VAL（）））{

          $（本）的.css（'边框颜色，errorColor）;

          formIsValid = FALSE;

        }

        //检查电子邮件是否有效

        VAR email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        如果（$（本）.attr（类型）==电子邮件和安培;＆安培;！email_reg.test（$修剪（$（本）.VAL（））））{

          $（本）的.css（'边框颜色，errorColor）;

          formIsValid = FALSE;

        }

      }）;

      //将数据提交到服务器，如果表单字段内容有效

      如果（formIsValid）{

        //检索输入字段值被发送到服务器

        VAR post_data =新FORMDATA（）;
        post_data.append（'form_firstname'，$（'输入[名称= form_firstname]）VAL（））;
        post_data.append（'form_lastname'，$（'输入[名称= form_lastname]）VAL（））;
        post_data.append（'form_address'，$（'输入[名称= form_address]）VAL（））;
        post_data.append（'form_city'，$（'输入[名称= form_city]）VAL（））;
        post_data.append（'form_email'，$（'输入[名称= form_email]）VAL（））;
        post_data.append（'form_phone'，$（'输入[名称= form_phone]）VAL（））;
        post_data.append（'form_attachment'，$（'输入[名称= form_attachment]'）[0] .files [0]）;
        post_data.append（'form_message'，$（'textarea的[名称= form_message]）VAL（））;

        //阿贾克斯POST数据到服务器

        $阿贾克斯（{
          网址：http://jdoe.com/sendContactFormEmail.php，
          数据：post_data，
          的contentType：假的，
          过程数据：假的，
          键入：POST，
          数据类型：JSON，
          成功：函数（响应）{

            如果（response.type =='错误'）的服务器和输出消息{//加载JSON数据

              输出='＆LT; DIV CLASS =错误＆GT; + response.text +'＆LT; / DIV＆GT;';

            } 其他 {

              输出='＆LT; DIV CLASS =成功＆GT; + response.text +'＆LT; / DIV＆GT;';

              //在所有表单域重置价值

              $（matchFormFields）.VAL（''）;

            }

            //显示的表单提交结果的动画

            $（matchContactSubmitResult）.hide（）的html（输出）.slideDown（）;

          }

        }）;

      }

    }）;

    //重新设置边界在表单字段输入字符

    $（matchFormFields）.keyup（函数（）{

      $（本）的CSS（'边框颜色'，''）;

      $（matchContactSubmitResult）.slideUp（）;

    }）;

  }）;

    ＆LT; / SCRIPT＆GT;

下面是PHP code接收jQuery的AJAX POST请求：

 ＆LT; PHP

      // $输出= json_en code（阵列（'类型'=＆GT;'错误'，'文字'=＆GT;'是'））;

      //模具（$输出）;

  包括（settings.php文件）;

  $ boundaryString =generateboundaryfromthis;

  $ to_email =jdoe@gmail.com;

  $ FROM_EMAIL =noreply@jdoe.com;

  $ replyTo_email =noreply@jdoe.com;

  如果（使用isset（$ _ POST））{

    //检查这是否是一个Ajax请求，如果出口不

    如果（！使用isset（$ _ SERVER ['HTTP_X_REQUESTED_WITH']）||用strtolower（$ _ SERVER ['HTTP_X_REQUESTED_WITH']）！='xmlhtt prequest'）{

      $输出= json_en code（阵列（
        '类型'=＆GT;错误'，
        文本=＆GT; 阿贾克斯POST请求的预期。
      ））;

      死亡（$输出）; //退出脚本输出JSON数据

    }

    //消毒检索输入数据

    $ form_firstname = filter_var（$ _ POST [form_firstname]，FILTER_SANITIZE_STRING）;
    $ form_lastname = filter_var（$ _ POST [form_lastname]，FILTER_SANITIZE_STRING）;
    $ form_address = filter_var（$ _ POST [form_address]，FILTER_SANITIZE_STRING）;
    $ form_city = filter_var（$ _ POST [form_city]，FILTER_SANITIZE_STRING）;
    $ form_email = filter_var（$ _ POST [form_email]，FILTER_SANITIZE_EMAIL）;
    $ form_phone = filter_var（$ _ POST [form_phone]，FILTER_SANITIZE_NUMBER_INT）;
    $ form_message = filter_var（$ _ POST [form_message]，FILTER_SANITIZE_STRING）;

    $ email_body =＆LT;＆LT;＆LT; EOT
姓：$ form_firstname
名字：$ form_lastname
地址：$ form_address
市：$ form_city
电子邮箱：$ form_email
电话：$ form_phone
信息：
$ form_message
EOT;

    //获取附加文件

    $ hasAttachment = FALSE;

    如果（使用isset（$ _ FILES [form_attachment]））{

      $ hasAttachment = TRUE;

      $ fileTmpName = $ _FILES [form_attachment] [tmp_name的值'];
      $文件名= $ _FILES [form_attachment] [名称];
      $档案大小= $ _FILES [form_attachment] ['大小'];
      $的fileType = $ _FILES [form_attachment] [型];
      $ fileError = $ _FILES [form_attachment] [错误];

      $处理=的fopen（$ fileTmpName）;

      $内容=的fread（$处理，$文件大小）;

      fclose函数（$处理）;

      $ EN codedContent = chunk_split（base64_en code（$内容））;

    }

    如果（$ hasAttachment）{

      //用户提交的附件

      $边界= MD5（$ boundaryString）;

      //头

      $标题=MIME-版本：1.0 \ r \ N的;
      $标题=发件人。 $ FROM_EMAIL。 \ r \ N的;
      $标题=回复：。 $ replyTo_email。 \ r \ N的;
      。$标题=内容类型：多重/混合;边界= $边界\ r \ñ\ r \ N的;

      // 纯文本

      $身体= -  $边界\ r \ N的;
      $身体=内容类型：text / plain的;字符集= ISO-8859-1 \ r \ N的;
      $身体=内容传输编码：BASE64 \ r \ñ\ r \ N。
      。$身体= chunk_split（base64_en code（$ email_body））;

      // 附件

      $身体= -  $边界\ r \ N。
      $身体=内容类型：$的fileType;名称= \$文件名\\ r \ N。
      $身体=内容处置：附件;文件名= \$文件名\\ r \ N的;
      $身体=内容传输编码：BASE64 \ r \ N。
      $身体=X-附-ID：.rand（1000,99999）为\ r \ñ\ r \ N;
      $身体= $ EN codedContent。

    } 其他 {

      //用户没有提交附件

      $标题=发件人。 $ FROM_EMAIL。 \ r \ N。
                 回复：  。 $ replyTo_email。 \ N。
                 X-梅勒：PHP /。 phpversion（）;

      $身体= $ email_body;

    }

    $ mailSentSuccessfully =电子邮件（$ to_email，$主题，$机构，$头）;

    如果（$ mailSentSuccessfully）{

      // $输出= json_en code（阵列（'类型'=＆GT;'消息'，'文字'=＆GT; $ pageSettings-＆GT; getContents（mailSentSuccess）））;
      $输出= json_en code（阵列（'类型'=＆GT;'消息'，'文字'=＆GT;信息已发出。'））;

      死亡（$输出）;

    } 其他 {

      // $输出= json_en code（阵列（'类型'=＆GT;'错误'，'文字'=＆GT; $ pageSettings-＆GT; getContents（mailSentFailure）））;
      $输出= json_en code（阵列（'类型'=＆GT;'错误'，'文字'=＆GT;'。遇到错误信息未发送。'））;

      死亡（$输出）;

    }

  }

解决方案

问题一：你忘了一个HTML标签

  matchContactSubmitResult =#contactSubmitResult;

添加

 ＆LT; DIV ID =contactSubmitResult＆GT;＆LT; / DIV＆GT;

下面的代码片段。我冒昧地提供替代成功：函数（）{} ，而不是我用 .done（）和 .fail（）来提供网络或其他问题。在这里看到： jQuery.ajax（）（我不能测试你的PHP code ，但你的jquery code工作）

 $（文件）。就绪（函数（）{

    matchFormFields =#contactForm输入[要求]，#contactForm的textarea [要求];

    matchContactSubmitResult =#contactSubmitResult;

    errorColor ='红';

    $（＃form_send）。点击（函数（）{

      VAR formIsValid = TRUE;

      //通过各个领域的循环，改变边框颜色为红色无效的领域

      $（matchFormFields）。每个（函数（）{

        $（本）的CSS（'边框颜色'，''）;

        //检查是否字段为空

        如果（！$。修剪（$（本）.VAL（）））{

          $（本）的.css（'边框颜色，errorColor）;

          formIsValid = FALSE;

        }

        //检查电子邮件是否有效

        VAR email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        如果（$（本）.attr（类型）==电子邮件和安培;＆安培;！email_reg.test（$修剪（$（本）.VAL（））））{

          $（本）的.css（'边框颜色，errorColor）;

          formIsValid = FALSE;

        }

      }）;

      //将数据提交到服务器，如果表单字段内容有效

      如果（formIsValid）{

        //检索输入字段值被发送到服务器

        VAR post_data =新FORMDATA（）;
        post_data.append（'form_firstname'，$（'输入[名称= form_firstname]）VAL（））;
        post_data.append（'form_lastname'，$（'输入[名称= form_lastname]）VAL（））;
        post_data.append（'form_address'，$（'输入[名称= form_address]）VAL（））;
        post_data.append（'form_city'，$（'输入[名称= form_city]）VAL（））;
        post_data.append（'form_email'，$（'输入[名称= form_email]）VAL（））;
        post_data.append（'form_phone'，$（'输入[名称= form_phone]）VAL（））;
        post_data.append（'form_attachment'，$（'输入[名称= form_attachment]'）[0] .files [0]）;
        post_data.append（'form_message'，$（'textarea的[名称= form_message]）VAL（））;

        //阿贾克斯POST数据到服务器

        $阿贾克斯（{
          网址：http://jdoe.com/sendContactFormEmail.php，
          数据：post_data，
          的contentType：假的，
          过程数据：假的，
          键入：POST，
          数据类型：JSON

        }）.done（函数（响应）{

            如果（response.type =='错误'）的服务器和输出消息{//加载JSON数据

            输出='＆LT; DIV CLASS =错误＆GT; + response.text +'＆LT; / DIV＆GT;';

            } 其他 {

              输出='＆LT; DIV CLASS =成功＆GT; + response.text +'＆LT; / DIV＆GT;';

              //在所有表单域重置价值

              $（matchFormFields）.VAL（''）;

            }
$（matchContactSubmitResult）.hide（）的html（输出）.slideDown（）;


          }）。
          失败（函数（响应）{
              输出='＆LT; DIV CLASS =错误＆GT;网络问题＆LT; / DIV＆GT;';
          $（matchContactSubmitResult）.hide（）的html（输出）.slideDown（）;

            }）;
        
      }

    }）;

    //重新设置边界在表单字段输入字符

    $（matchFormFields）.keyup（函数（）{

      $（本）的CSS（'边框颜色'，''）;

      $（matchContactSubmitResult）.slideUp（）;

    }）;

  }）;

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>
＆LT; DIV ID =联系形式＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_firstname＆GT;名字＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_firstnameNAME =form_firstname值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_lastname＆GT;姓氏＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_lastnameNAME =form_lastname值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_address＆gt;地址＆LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_addressNAME =form_address值=/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_city＆GT;城市和LT; /标签＆gt;
          ＆LT;输入类型=文本ID =form_cityNAME =form_city值=/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL1＆GT;
          ＆LT;标签=form_email＆GT;电子邮件＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=电子邮件ID =form_emailNAME =form_email值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL2＆GT;
          ＆LT;标签=form_phone＆GT;电话＆LT;跨度类=需要与GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT;输入类型=电话ID =form_phoneNAME =form_phone值=要求/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;标签=form_attachment＆gt;添加附件＆LT; /标签＆gt;
          ＆LT;输入类型=文件ID =form_attachmentNAME =form_attachment/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;标签=form_message＆gt;消息＆LT;跨度类=需要＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
          ＆LT; textarea的ID =form_messageNAME =form_message要求＆GT;＆LT; / textarea的＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL12＆GT;
          ＆LT;输入类型=提交ID =form_send值=发送formnovalidate =formnovalidate/＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
＆LT; DIV ID =contactSubmitResult＆GT;＆LT; / DIV＆GT;

I am trying to send an email with an optional attachment when a button is clicked and display the results above the form fields. I have put together the following code, but it is not working (nothing happens when I click the submit button; would like to create a fiddle but JSFiddle does not accept PHP code):

Here is the HTML:

  <div id="contactSubmitResult"></div>
      <div id="contactSubmitResult"></div>
      <div id="contactForm">
        <div class="col1">
          <label for="form_firstname">Firstname <span class="required">*</span></label>
          <input type="text" id="form_firstname" name="form_firstname" value="" required />
        </div>
        <div class="col2">
          <label for="form_lastname">Lastname <span class="required">*</span></label>
          <input type="text" id="form_lastname" name="form_lastname" value="" required />
        </div>
        <div class="col1">
          <label for="form_address">Address</label>
          <input type="text" id="form_address" name="form_address" value="" />
        </div>
        <div class="col2">
          <label for="form_city">City</label>
          <input type="text" id="form_city" name="form_city" value="" />
        </div>
        <div class="col1">
          <label for="form_email">Email <span class="required">*</span></label>
          <input type="email" id="form_email" name="form_email" value="" required />
        </div>
        <div class="col2">
          <label for="form_phone">Phone <span class="required">*</span></label>
          <input type="tel" id="form_phone" name="form_phone" value="" required />
        </div>
        <div class="col12">
          <label for="form_attachment">Add Attachment</label>
          <input type="file" id="form_attachment" name="form_attachment" />
        </div>
        <div class="col12">
          <label for="form_message">Message <span class="required">*</span></label>
          <textarea id="form_message" name="form_message" required></textarea>
        </div>
        <div class="col12">
          <input type="submit" id="form_send" value="Send" formnovalidate="formnovalidate" />
        </div>
      </div>

Here is the JavaScript:

    <script type="text/javascript" src="http://jdoe.com/js/jquery-1.11.1.min.js"></script>

    <!-- validate and submit form input -->
    <script type="text/javascript">

  $(document).ready(function() {

    matchFormFields = "#contactForm input[required], #contactForm textarea[required]";

    matchContactSubmitResult = "#contactSubmitResult";

    errorColor = 'red';

    $("#form_send").click(function() { 

      var formIsValid = true;

      // loop through each field and change border color to red for invalid fields       

      $(matchFormFields).each(function() {

        $(this).css('border-color', '');

        // check whether field is empty

        if(!$.trim($(this).val())) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }

        // check whether email is valid

        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

        if($(this).attr("type") == "email" && !email_reg.test($.trim($(this).val()))) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }   

      });

      // submit data to server if form field contents are valid

      if (formIsValid) {

        // retrieve input field values to be sent to server

        var post_data = new FormData();
        post_data.append('form_firstname',  $('input[name=form_firstname]').val());
        post_data.append('form_lastname',   $('input[name=form_lastname]').val());
        post_data.append('form_address',    $('input[name=form_address]').val());
        post_data.append('form_city',       $('input[name=form_city]').val());
        post_data.append('form_email',      $('input[name=form_email]').val());
        post_data.append('form_phone',      $('input[name=form_phone]').val());
        post_data.append('form_attachment', $('input[name=form_attachment]')[0].files[0]);
        post_data.append('form_message',    $('textarea[name=form_message]').val());

        // Ajax post data to server

        $.ajax({
          url: 'http://jdoe.com/sendContactFormEmail.php',
          data: post_data,
          contentType: false,
          processData: false,
          type: 'POST',
          dataType: 'json',
          success: function(response) {  

            if (response.type == 'error') { // load json data from server and output message

              output = '<div class="error">' + response.text + '</div>';

            } else {

              output = '<div class="success">' + response.text + '</div>';

              // reset values in all form fields

              $(matchFormFields).val('');

            }

            // display an animation with the form submission results

            $(matchContactSubmitResult).hide().html(output).slideDown();

          }

        });

      }

    });

    // reset border on entering characters in form fields

    $(matchFormFields).keyup(function() {

      $(this).css('border-color', '');

      $(matchContactSubmitResult).slideUp();

    });

  });

    </script>

Here is the PHP code which receives the jQuery AJAX POST request:

<?php

      //$output = json_encode(array('type'=>'error', 'text' => 'Yes'));

      //die($output);

  include("settings.php");

  $boundaryString = "generateboundaryfromthis";

  $to_email = "jdoe@gmail.com";

  $from_email = "noreply@jdoe.com";

  $replyTo_email = "noreply@jdoe.com";

  if (isset($_POST)) {

    // check whether this is an ajax request, exit if not

    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

      $output = json_encode(array(
        'type' =>' error', 
        'text' => 'Ajax POST request expected.'
      ));

      die($output); //exit script outputting json data

    } 

    // retrieve sanitized input data

    $form_firstname  = filter_var($_POST["form_firstname"], FILTER_SANITIZE_STRING);
    $form_lastname   = filter_var($_POST["form_lastname"], FILTER_SANITIZE_STRING);
    $form_address    = filter_var($_POST["form_address"], FILTER_SANITIZE_STRING);
    $form_city       = filter_var($_POST["form_city"], FILTER_SANITIZE_STRING);
    $form_email      = filter_var($_POST["form_email"], FILTER_SANITIZE_EMAIL);
    $form_phone      = filter_var($_POST["form_phone"], FILTER_SANITIZE_NUMBER_INT);
    $form_message    = filter_var($_POST["form_message"], FILTER_SANITIZE_STRING);

    $email_body = <<<EOT
Firstname: $form_firstname
Lastname: $form_lastname
Address: $form_address
City: $form_city
E-mail: $form_email
Phone: $form_phone
Message:
$form_message
EOT;

    // retrieve attached file

    $hasAttachment = false;

    if (isset($_FILES["form_attachment"])) {

      $hasAttachment = true;

      $fileTmpName = $_FILES["form_attachment"]['tmp_name'];
      $fileName    = $_FILES["form_attachment"]['name'];
      $fileSize    = $_FILES["form_attachment"]['size'];
      $fileType    = $_FILES["form_attachment"]['type'];
      $fileError   = $_FILES["form_attachment"]['error'];

      $handle = fopen($fileTmpName);

      $content = fread($handle, $fileSize);

      fclose($handle);

      $encodedContent = chunk_split(base64_encode($content));

    }

    if ($hasAttachment) {

      // user submitted an attachment

      $boundary = md5($boundaryString);

      // header

      $headers = "MIME-Version: 1.0\r\n"; 
      $headers .= "From:" . $from_email . "\r\n"; 
      $headers .= "Reply-To: " . $replyTo_email . "\r\n";
      $headers .= "Content-Type: multipart/mixed; boundary = $boundary\r\n\r\n"; 

      // plain text 

      $body = "--$boundary\r\n";
      $body .= "Content-Type: text/plain; charset=ISO-8859-1\r\n";
      $body .= "Content-Transfer-Encoding: base64\r\n\r\n"; 
      $body .= chunk_split(base64_encode($email_body)); 

      // attachment

      $body .= "--$boundary\r\n";
      $body .="Content-Type: $fileType; name=\"$fileName\"\r\n";
      $body .="Content-Disposition: attachment; filename=\"$fileName\"\r\n";
      $body .="Content-Transfer-Encoding: base64\r\n";
      $body .="X-Attachment-Id: ".rand(1000,99999)."\r\n\r\n"; 
      $body .= $encodedContent; 

    } else {

      // user did not submit an attachment

      $headers = "From:" . $from_email . "\r\n" .
                 "Reply-To: " . $replyTo_email . "\n" .
                 "X-Mailer: PHP/" . phpversion();

      $body = $email_body;

    }

    $mailSentSuccessfully = mail($to_email, $subject, $body, $headers);

    if ($mailSentSuccessfully) {

      //$output = json_encode(array('type'=>'message', 'text' => $pageSettings->getContents("mailSentSuccess")));
      $output = json_encode(array('type'=>'message', 'text' => 'Message sent.'));

      die($output);

    } else {

      //$output = json_encode(array('type'=>'error', 'text' => $pageSettings->getContents("mailSentFailure")));
      $output = json_encode(array('type'=>'error', 'text' => 'Error encountered. Message not sent.'));

      die($output);

    }

  }

解决方案

One problem: you forgot to put a html tag to

matchContactSubmitResult = "#contactSubmitResult";

add

<div id="contactSubmitResult"></div>

Here is snippet. I take the liberty to provide an alternative to success: function(){}, instead I used .done() and .fail() to provide in network or other problems. See here: jQuery.ajax() (I can't test your php code, but your jquery code works)

$(document).ready(function() {

    matchFormFields = "#contactForm input[required], #contactForm textarea[required]";

    matchContactSubmitResult = "#contactSubmitResult";

    errorColor = 'red';

    $("#form_send").click(function() { 

      var formIsValid = true;

      // loop through each field and change border color to red for invalid fields       

      $(matchFormFields).each(function() {

        $(this).css('border-color', '');

        // check whether field is empty

        if(!$.trim($(this).val())) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }

        // check whether email is valid

        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

        if($(this).attr("type") == "email" && !email_reg.test($.trim($(this).val()))) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }   

      });

      // submit data to server if form field contents are valid

      if (formIsValid) {

        // retrieve input field values to be sent to server

        var post_data = new FormData();
        post_data.append('form_firstname',  $('input[name=form_firstname]').val());
        post_data.append('form_lastname',   $('input[name=form_lastname]').val());
        post_data.append('form_address',    $('input[name=form_address]').val());
        post_data.append('form_city',       $('input[name=form_city]').val());
        post_data.append('form_email',      $('input[name=form_email]').val());
        post_data.append('form_phone',      $('input[name=form_phone]').val());
        post_data.append('form_attachment', $('input[name=form_attachment]')[0].files[0]);
        post_data.append('form_message',    $('textarea[name=form_message]').val());

        // Ajax post data to server

        $.ajax({
          url: 'http://jdoe.com/sendContactFormEmail.php',
          data: post_data,
          contentType: false,
          processData: false,
          type: 'POST',
          dataType: 'json'

        }) .done(function(response) {  

            if (response.type == 'error') { // load json data from server and output message

            output = '<div class="error">' + response.text + '</div>';

            } else {

              output = '<div class="success">' + response.text + '</div>';

              // reset values in all form fields

              $(matchFormFields).val('');

            }
$(matchContactSubmitResult).hide().html(output).slideDown();


          }).
          fail( function(response){
              output = '<div class="error"> NetWork Problems</div>';
          $(matchContactSubmitResult).hide().html(output).slideDown();

            });
        
      }

    });

    // reset border on entering characters in form fields

    $(matchFormFields).keyup(function() {

      $(this).css('border-color', '');

      $(matchContactSubmitResult).slideUp();

    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contactForm">
        <div class="col1">
          <label for="form_firstname">Firstname <span class="required">*</span></label>
          <input type="text" id="form_firstname" name="form_firstname" value="" required />
        </div>
        <div class="col2">
          <label for="form_lastname">Lastname <span class="required">*</span></label>
          <input type="text" id="form_lastname" name="form_lastname" value="" required />
        </div>
        <div class="col1">
          <label for="form_address">Address</label>
          <input type="text" id="form_address" name="form_address" value="" />
        </div>
        <div class="col2">
          <label for="form_city">City</label>
          <input type="text" id="form_city" name="form_city" value="" />
        </div>
        <div class="col1">
          <label for="form_email">Email <span class="required">*</span></label>
          <input type="email" id="form_email" name="form_email" value="" required />
        </div>
        <div class="col2">
          <label for="form_phone">Phone <span class="required">*</span></label>
          <input type="tel" id="form_phone" name="form_phone" value="" required />
        </div>
        <div class="col12">
          <label for="form_attachment">Add Attachment</label>
          <input type="file" id="form_attachment" name="form_attachment" />
        </div>
        <div class="col12">
          <label for="form_message">Message <span class="required">*</span></label>
          <textarea id="form_message" name="form_message" required></textarea>
        </div>
        <div class="col12">
          <input type="submit" id="form_send" value="Send" formnovalidate="formnovalidate" />
        </div>
      </div>
<div id="contactSubmitResult"></div>

这篇关于PHP，jQuery的，阿贾克斯，发送带有附件栏code没有工作的HTML输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

PHP，jQuery的，阿贾克斯，发送带有附件栏code没有工作的HTML输入字段 [英] PHP, jQuery, Ajax, send HTML input fields with attachment field code not working

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

PHP，jQuery的，阿贾克斯，发送带有附件栏code没有工作的HTML输入字段 [英] PHP, jQuery, Ajax, send HTML input fields with attachment field code not working

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭