使用PHP通过电子邮件发送图像内容

Question

我在尝试通过php发送一些div的内容时遇到问题。我有一个多步形式，分阶段采用各种输入类型来个性化一件珠宝。多步骤形式中的这些步骤之一在珠宝件上提供雕刻服务。 我希望客户单击选择的字符，符号并将这些图像添加到另一个创建其消息的div中。我似乎无法将div内容发送到PHP页面。我也希望能够通过电子邮件发送这些数据，以便我们的珠宝商可以阅读它。

这是我的标记：

 <form action="contact.php" method="post"  class="ajax"> 

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <div class="row">
                     <div style="text-align: center;" class="col-md-12 header">
                        <img src="images/layoutoptions.jpg" alt="kryptos layout options in diagrams">
                        <br>
                        <h3>Click to add a character and build your message. Up to 70 characters.</h3>
                        <p>Layout options include:   Full message– (we use a symbol to signify the start and end), Split message – (symbols can separate sections), Split message – rotate to read (each element is separated by symbols) or  Short message (can be started and finished with a symbol).</p>
                    </div>
                </div>
               <div class="row">
                    <div id="characters" class="col-md-6">
                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/A-acorn.jpg">
                      </span>

                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/B-butterfly.jpg">
                      </span>

                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/C-cross.jpg">
                      </span>

                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/D-diamonds.jpg">
                      </span>
                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/E-eternal.jpg">
                      </span>

                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/F-feet.jpg">
                      </span>

                      <span>
                        <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/G-flower.jpg">
                      </span>

                    </div>

                    <div id="FrontFace" name="frontface" class="col-md-6"></div>

                </div>
                <div class="row">
                    <div class="col-md-12">
                      <input class="button" type="BUTTON" id="btn2" value="Undo">
                      <input class="button" type="BUTTON" id="btn3" value="Clear">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                      <h2 id="textarea_feedback"> 70 characters remaining</h2>
                    </div>
                    <div id="errors" class="col-md-6"></div>
                </div> 

                  </div>

              </div>
          </div>
    <button type="submit" data-type="submit" class="btn btn-primary msf-nav-button">Submit</button>

这是Jquery：

         $(function (){

      var text_max = 70; 

      var source = null;

      var iCnt = 0;

      var text_remaining = 70;


     //Click Image to add to div Frontface
     $('img').click(function(){
      if (iCnt <= 70) {

          source = $(this).attr("src");

          iCnt = iCnt + 1;
          $("#errors").empty();
          $("#FrontFace").append('<span class="input" id=tb' + iCnt + ' ><img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" /></span>');

          text_remaining = text_max - iCnt;

          $('#textarea_feedback').html(text_remaining + ' characters remaining');
         }
         else {
          $("#errors").append('<label>Reached the limit</label><br>'); 
         }


      });

      // REMOVE ONE ELEMENT PER CLICK.
      $('#btn2').click(function() {
          if (iCnt != 0) { 

            $('#tb' + iCnt).remove(); 

            iCnt = iCnt - 1; 

            text_remaining = text_max - iCnt;

            $('#textarea_feedback').html(text_remaining + ' characters remaining'); 

          }

          if (iCnt == 0) { 
              $("#errors").append('<label>Please add characters.</label><br>'); 
          }
      });

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

          $("#FrontFace").empty();

          $("#errors").empty();

          if (iCnt != 0) {
            iCnt = 0;
            text_remaining = 70;
            $('#textarea_feedback').html(text_remaining + ' characters remaining');
          }
      });


    $('form.ajax').on('submit', function() {
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data ={};

        that.find('[name]').each(function(index, value) {
          var that = $(this),
              name = that.attr('name'),
              value = that.val();

          data[name] = value;
        });

      console.log(data);  


      return false;

    });



  });

任何帮助都将非常感激，jquery需要优化，因为我已经在线获取了一个mutlistep表单的演示并将所有内容都删除了。

p

Answer 1

您没有提交任何数据，因为您的循环正在查找while True: client.connect(broker_address, port) message = 'msg' client.publish(topic, message) time.sleep(1) client.loop_forever()` 属性，该属性仅出现在name元素上。因此，您只需将#FrontFace值（范围没有值）添加到undefined索引处的数据数组中。 您应该按如下方式编辑HTML（请注意undefined标记）

<img>

相应的你的jQuery。我不知道你想要获得什么 <form action="contact.php" method="post" class="ajax"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="form-group"> <div class="row"> <div style="text-align: center;" class="col-md-12 header"> <img src="images/layoutoptions.jpg" alt="kryptos layout options in diagrams"> <br> <h3>Click to add a character and build your message. Up to 70 characters.</h3> <p>Layout options include: Full message– (we use a symbol to signify the start and end), Split message – (symbols can separate sections), Split message – rotate to read (each element is separated by symbols) or Short message (can be started and finished with a symbol).</p> </div> </div> <div class="row"> <div id="characters" class="col-md-6"> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/A-acorn.jpg" data-type="A-acorn"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/B-butterfly.jpg" data-type="B-butterfly"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/C-cross.jpg" data-type="C-cross"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/D-diamonds.jpg" data-type="D-diamonds"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/E-eternal.jpg" data-type="E-eternal"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/F-feet.jpg" data-type="F-feet"> </span> <span> <img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/G-flower.jpg" data-type="G-flower"> </span> </div> <div id="FrontFace" name="frontface" class="col-md-6"></div> </div> <div class="row"> <div class="col-md-12"> <input class="button" type="BUTTON" id="btn2" value="Undo"> <input class="button" type="BUTTON" id="btn3" value="Clear"> </div> </div> <div class="row"> <div class="col-md-6"> <h2 id="textarea_feedback"> 70 characters remaining</h2> </div> <div id="errors" class="col-md-6"></div> </div> </div> </div> </div> <button type="submit" data-type="submit" class="btn btn-primary msf-nav-button">Submit</button> 以及什么是value所以我只是将项目推送到数组中。代码有效，但您应该根据需要进行编辑。

name

选中此fiddle

这样做的另一种方式，无需遍历元素来收集数据，就是添加一个隐藏的$(function() { var text_max = 70; //var source = null; this should not be global var iCnt = 0; var text_remaining = 70; //Click Image to add to div Frontface $('img').click(function() { if (iCnt <= 70) { var source = $(this).attr("src"); var type = $(this).data('type'); iCnt = iCnt + 1; $("#errors").empty(); $("#FrontFace").append('<span class="input" id="tb' + iCnt + '" data-type="' + type + '" ><img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" /></span>'); text_remaining = text_max - iCnt; $('#textarea_feedback').html(text_remaining + ' characters remaining'); } else { $("#errors").append('<label>Reached the limit</label><br>'); } }); // REMOVE ONE ELEMENT PER CLICK. $('#btn2').click(function() { if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; text_remaining = text_max - iCnt; $('#textarea_feedback').html(text_remaining + ' characters remaining'); } if (iCnt == 0) { $("#errors").append('<label>Please add characters.</label><br>'); } }); $("#btn3").click(function() { $("#FrontFace").empty(); $("#errors").empty(); if (iCnt != 0) { iCnt = 0; text_remaining = 70; $('#textarea_feedback').html(text_remaining + ' characters remaining'); } }); $('form.ajax').on('submit', function(e) { e.preventDefault(); var url = $(this).attr('action'), method = $(this).attr('method'), data = []; $(this).find('span.input').each(function(index, value) { var type = $(this).data('type') data.push(type); }); console.log(data); return false; }); }); 字段，该字段将随表单的提交一起发送。

这将导致<input>数组以表格

发送

$_POST['character']

这会导致与表单一起发送$('img').click(function() { if (iCnt <= 70) { var source = $(this).attr("src"); var type = $(this).data('type'); iCnt = iCnt + 1; $("#errors").empty(); $("#FrontFace").append('<span class="input" id="tb' + iCnt + '">' +'<img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" />' +'<input type="hidden" name="characters[]" value="' + type + '"/>' +'</span>'); text_remaining = text_max - iCnt; $('#textarea_feedback').html(text_remaining + ' characters remaining'); } else { $("#errors").append('<label>Reached the limit</label><br>'); } }); 数组，您可以使用

读取它

$_POST['character']