Question

我正在尝试在Featherlight灯箱中添加ajax照片上传脚本，但它无法正常工作！所以，如果有人能够让我知道我做错了什么，那就太棒了！我已经在添加JQuery库了;其他一切工作正常，但是当上传表格保存在灯箱div中时，ajax没有提交上传的照片，以便将其加载到灯箱中！这是我的代码：

<script type="text/javascript">
$(document).ready(function (e) {
    $('#uploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function(data)
        {
      $("#targetLayer").html(data);
        },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $(".inputFile").on("change", function() {
        $("#uploadForm").submit();
    });
});
</script>

<a href="#" data-featherlight="#add_new_profile" data-featherlight-variant="fixwidth"><button class="btn btn-success">Add New Client Profile</button></a>
  <div class="lightbox" id="add_new_profile">

      <div class="bgColor">
<form id="uploadForm" action="upload_image.php" method="post">
<div id="targetLayer">No Image</div>
<div id="uploadFormLayer">
<label>Upload Image File:</label><br/>
<input name="userImage" id="userImage" type="file" class="inputFile" />
<input type="submit">
</form>
</div>
</div>

  <form id="contact" action="actions.php" method="post">
    <h3>Add New Profile</h3>
    <h4>Fill All Require Details In Order To Add A Client Profile!</h4>
    <fieldset>
      <input placeholder="Namn (Name)" name="full_name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Ålder (Age)" name="age" type="text" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Ort (City)" name="city" type="text" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Yrke (Profession)" name="profession" type="text" tabindex="4" required>
    </fieldset>
      <fieldset>
      <input placeholder="Kundnr (Client ID)" name="client_id" type="text" tabindex="5" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Info" tabindex="6" name="info" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" value="create" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form> 
       </div>
        </div>

Answer 1

您正在灯箱中使用ID。 Featherlight复制DOM对象，默认情况下（除非您使用persist选项）。使用类而不是ID，使用比$("#targetLayer")更好的定位器，你就可以了。

Ajax在Featherlight中不起作用

1 个答案: