数据无法通过formdata检索 [英] data not retrieve through formdata

问题描述

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

I am trying to save image using ajax .and passing data through Formdata() but at php file i can not retrieve data or image name please help me here is my code

<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脚本代码:

here is my ajax script code:

$("#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"代码:

And here is my "DbManipute.php" code:

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";
   }
}

我没有收到任何错误，也没有插入数据. 当我删除图像上传并使用序列化方法时，数据会成功保存，但是在序列化方法中无法获取图像文件名 请帮助我.

i didn't get any error and data also not inserted. when i remove image upload and use serialize method then data is saved successfully but in serialize method image file name can not retrieve please help me regarding this.

推荐答案

您的客户端错误将不会像php一样显示在页面中. 您的JavaScript代码中有一些错误.您错过了js代码结尾处的右括号:});

Your client side error will not be shown in the page just like php. You have some errors in your javascript code. You have missed an closing parenthesis at the end of js code: });

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

If you are using chrome or firefox browser, press F12 button and console will be shown and will show you your js errors.

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

Tip: you can debug your project by printing any variables in your code. For example try to use console.log('test'); in your js code to check if your ajax command is working. console.log() will print in console box of browser.

当我在您的代码中执行此操作时，我知道您的代码根本没有运行.因为您已将代码设置为在提交上运行，并且没有任何提交按钮.然后，您需要更改按钮的type="submit".

When i did this in your code i understood that your code is not running at all. Because you have set your code to be run on submit and you do not have any submit button. Then you need to change your button's type="submit".

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

After that you need to prevent form by submitting the form using browser and tell browser that you want to run your js code. For that you need need to prevent default action for form submit event like this:

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

另一个提示是，您的php代码处于从未调用的函数中.您需要在php文件中调用php函数，或者将代码置于函数之外.

Another tip is that your php code is in a function that is never called. you need to call your php function in your php file or you should put your codes out of function.

尝试像这样更改代码.这应该使您的代码正常工作.并检查您的ajax请求是否有效，请尝试在您的代码中回显某些内容，并在js代码中提醒响应.

Try changing your code like this. This should make your code work. And to check if your ajax request is working try to echo something in your code and in your js code alert the response.

编辑#1 要考虑的另一件事是，对于要使用ajax上传文件的情况，您不能设置FormData(this)之类的数据.为了进行Ajax上传，您应该创建FormData对象(new FormData())并分别附加数据. (如Rejith R Krishnan所说.)

Edit#1 One more thing to consider is that for cases that you want to upload files using ajax, you can not set data like FormData(this). For ajax uploading purpose you should create object of FormData (new FormData()) and append the data separately. (as Rejith R Krishnan said).

这篇关于数据无法通过formdata检索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！