Question

我正在尝试使用ajax保存图像并通过Formdata（）传递数据但在PHP文件我无法检索数据或图像名称请帮助我这是我的代码

<form name='signup' id='signup'>
    <div class="row">
        <!--<form id="uploadimage" action="" method="post" enctype="multipart/form-data">-->
        <div id="selectImage">
            <label>Select Image</label>
            <div id="image_preview">
                <img id="previewing" src="uploaded_files/259700.png" height="150" width="150" />
            </div>
            <input type="file" name="file" id="file" required />
            <!--<input type="submit" value="Upload" class="submit" />-->
        </div>
        <!--</form>-->
    </div>
    <div class='row'>
        <p>
            <label for='username'>First name</label>
            <input type='text' name='firstname' id='firstname' value='' placeholder='Enter First name' />
        </p>
    </div>
    <div class='row'>
        <p>
            <label for='lastname'>Last name</label>
            <input type='text' name='lastname' id='lastname' value='' placeholder='Enter Last name' />
        </p>
    </div>
    <div class='row'>
        <p>
            <label for='email'>Email</label>
            <input type='text' name='email' id='email' value='' placeholder='Enter Email' />
        </p>
    </div>
    <div class='row'>
        <p>
            <label for='phno'>Phno.</label>
            <input type='text' name='phno' id='phno' maxlength="10" value='' placeholder='Enter ph no' />
        </p>

    </div>
    <!--<input type="hidden" name="actionfunction" value="saveData" />-->
    <input type="hidden" name="actionfunction" value="saveData" />
    <div class='row'>
        <input type='button' id='formsubmit' class='submit' value='Submit' />
        <!--<input type='submit' id='formsubmit' class='submit' value='Submit' />-->
    </div>
</form>

这是我的ajax脚本代码：

$("#signup").on('submit', (function() {
  var fname = $("#firstname");
  var lname = $("#lastname");
  var email = $("#email");
  var phno = $("#phno");
  if (validateform(fname, lname, email, phno)) {
    var formdata = new FormData(this);
    $.ajax({
      url: "DbManipute.php",
      type: "POST",
      data: formdata,
      processdata: false,
      cache: false,
      contentType: false,
      success: function(response) {
        //alert(response);
        if (response == 'added') {
          $("#show_user").trigger("click");
          getusers();
          $("#msg").html("user added");
        }
      },
    });
  }
});

这是我的“DbManipute.php”代码：

function saveData($data,$con){
   $imgfile=$_FILES['file']['name']; 
   $fname = $data['firstname'];
   $lname = $data['lastname'];
   $email = $data['email'];
   $phno = $data['phno'];
   //$fname = $_POST['firstname'];
   //$lname = $_POST['lastname'];
   //$email = $_POST['email'];
   //$phno = $_POST['phno'];
   $sql = "insert into  tbl_employees(emp_name,emp_lname,emp_email,emp_phno,emp_pic) values('$fname','$lname','$email','$phno','$imgfile')";
   if($con->query($sql)){
       echo "added";
   } else {
       echo "error";
   }
}

我没有收到任何错误，也没有插入数据。当我删除图像上传并使用序列化方法然后数据保存成功但在序列化方法图像文件名无法检索请帮我解决这个问题。

Answer 1

您需要单独附加type="file"。

$("#signup").on('submit', (function() {
  var fname = $("#firstname");
  var lname = $("#lastname");
  var email = $("#email");
  var phno = $("#phno");
  if (validateform(fname, lname, email, phno)) {
    var formdata = new FormData(this);
    formdata.append( 'file', $("input[name='file']")[0].files[0] );
    $.ajax({
      url: "DbManipute.php",
      type: "POST",
      data: formdata,
      processdata: false,
      cache: false,
      contentType: false,
      success: function(response) {
        //alert(response);
        if (response == 'added') {
          $("#show_user").trigger("click");
          getusers();
          $("#msg").html("user added");
        }
      },
    });
  }
});

Answer 2

您的客户端错误不会像php一样显示在页面中。你的javascript代码中有一些错误。您错过了js代码末尾的右括号：});

如果您使用的是chrome或firefox浏览器，请按F12按钮，将显示控制台，并显示您的js错误。

提示：您可以通过在代码中打印任何变量来调试项目。例如，尝试在js代码中使用console.log('test');来检查您的ajax命令是否正常工作。 console.log()将在浏览器的控制台框中打印。

当我在你的代码中这样做时，我明白你的代码根本没有运行。因为您已将代码设置为在提交上运行，并且您没有任何提交按钮。然后，您需要更改按钮type="submit"。

之后，您需要通过使用浏览器提交表单来阻止表单，并告诉浏览器您要运行您的js代码。为此，您需要阻止表单提交事件的默认操作，如下所示：

$("#signup").on('submit', (function(evt) {
    evt.preventDefault();

另一个提示是你的PHP代码是一个永远不会调用的函数。你需要在你的php文件中调用你的php函数，否则你应该把你的代码放在功能之外。

尝试像这样更改代码。这应该使你的代码工作。并检查您的ajax请求是否正常工作尝试回应代码中的内容并在您的js代码中提醒响应。

编辑＃1 需要考虑的另一件事是，对于要使用ajax上传文件的情况，您无法设置FormData(this)之类的数据。对于ajax上传目的，您应该创建FormData（new FormData()）的对象并单独附加数据。（正如Rejith R Krishnan所说）。

数据无法通过formdata

2 个答案: