提交文本-数据和文件的php脚本与jquery

Submit text-data AND file to php script with jquery

本文关键字：php 脚本 jquery 文件 文本 数据 提交      更新时间：2023-09-26

我试图将HTML表单的输入传递给使用jQuery的PHP脚本，但所发生的只是页面的刷新。这个表单调用的PHP脚本返回一个格式化的div，其中包含所有的post数据。如何在页面中显示此数据而不重新加载它?

jQuery

$("form#submissionform").submit(function(){
  var formData = new FormData($(this));
  $.ajax({
    url: 'handlers/upload.php',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
      $("#submissionform").html(data);
    }});
  });


  <form id="submissionform" method="post" enctype="multipart/form-data">
    <p>Title: <p><br><input style="width:360px" type="text" name="songtitle"><br>
    <p>Artist: </p><br><input style="width:360px" type="text" name="artist"><br>
    <p>YouTube Link(s): </p><br><input style="width:360px" type="text" name="ytlinks" cols="50"><br>
    <p>Other Info </p><br><textarea style="width:100%" name="otherinfo" rows="4" cols="50" placeholder="Bitte alle zusätzlichen Informationen hier eintragen"></textarea><br>
    <p>Select file to upload:</p>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <br><br>
    <button>Send Form</button>
  </form>

首先在按钮上创建一个id。如果你使用submit，它会刷新你的页面。

<button id="btnSubmit">Submit</button>
然后

$("#btnSubmit").click(function(){
  var formData = new FormData($(this));//Here I'd like to suggest you send the data using variable .I'm giving one exmple then do like that
<p>Title: <p><br><input style="width:360px" type="text" name="songtitle" id="songtitle"><br>
var songTitle = $("#songtitle").val().trim();

你也可以这样做。

<p>Artist: </p><br><input style="width:360px" type="text" name="artist" id="artist"><br>
var artist = $("#artist").val().trim();
var formData = {
    artist : artist,
    songTitle : songTitle
}

$.ajax({
    url: 'handlers/upload.php',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
      $("#submissionform").html(data);
    }});
  });

(…)，但所发生的只是刷新页面。(…)

为了防止页面刷新，您必须防止默认表单提交。如果表单中的<button>没有指定type属性，或者如果该属性被动态更改为空或无效值，则将其视为type=submit，这将自然地将表单作为HTTP POST请求(重新加载页面)提交。

下面的代码应该可以为您工作:

index . html: 

<html>
<body>
<form id="submissionform" method="post" enctype="multipart/form-data">
    <p>Title: <p><br><input style="width:360px" type="text" name="songtitle"><br>
    <p>Artist: </p><br><input style="width:360px" type="text" name="artist"><br>
    <p>YouTube Link(s): </p><br><input style="width:360px" type="text" name="ytlinks" cols="50"><br>
    <p>Other Info </p><br><textarea style="width:100%" name="otherinfo" rows="4" cols="50" placeholder="Bitte alle zusätzlichen Informationen hier eintragen"></textarea><br>
    <p>Select file to upload:</p>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <br><br>
    <!-- The button has no "type" attribute specified, so it's treated as type="submit" : -->
    <button>Send Form</button>
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  $("form#submissionform").submit(function(event){
    // prevent default form submission:
    event.preventDefault();
    var data = new FormData($(this)[0]);
    $.ajax({
      url: 'handlers/upload.php',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
          alert(data);
      }
    });
  });
</script>
</body>
</html>

处理程序/upload.php: 

<?php
    $data = $_POST;
    foreach ($data as $key => $value) {
        echo $key . " " . $value . "'n";
    }
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $res = move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
    echo $res;
?>

注意:在我的情况下，我有上传文件夹在处理程序文件夹。

引用:

  • event.pReventDefault()
  • 按钮type属性
相关文章：