Send image to other page using $.post() method

Question

I have two pages first page has a form which accepts information like name,mobile-no etc and an image from user. I want to access the image using jquery and send it other page using $.post() method there i want to access the image and insert it into database

First File

<script>
        $(function(){
           $("#add_staff").click(function(){

              event.preventDefault();
                var regex_mobile=/^\d{10}$/;
                var regex_email = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                var insti=$("#inst_id").val();
                var name=$("#Staff_name").val();
                var pwd=$("#Staff_pwd").val();
                var add=$("#staff_address").val();
                var dob=$("#Staff_dob").val();
                var mail=$("#Staff_mail").val();
                var role=$("#Staff_role").val();
                var mobile=$("#Staff_mobile").val();
                var img = $('#image').prop('files')[0];

                if(name=="" || pwd=="" || add=="" || dob=="" || mail=="" || role=="" || mobile=="")
                {
                  alert("All fields are compulsory");
                }
                else{

                    if(!regex_mobile.test(mobile)) {
                    alert("Mobile Number invalid");
                    } 
                    else if(!regex_email.test(mail)){
                      alert("Email Invalid");
                    }
                    else{


                            $.post("add_faculty2.php",
                            {
                                  insti: insti,
                                  name:name,
                                  pwd:pwd,
                                  add:add,
                                  dob:dob,
                                  mail:mail,
                                  role:role,
                                  mobile:mobile,
                                  img:img
                            },

                               function(data,status){
                                      $("#msg").text(data);
                                      alert(data);

                                      alert(status);

                                 });

              }
           });
        });
      </script>

In the above file all the information is accepted from the user and in the jquery i have tried to access all the information and image then i am trying to send the data to other page using $.post() method.

Second File

<?php
$insti =$_POST['insti'];
$name =$_POST['name'];
$pwd =$_POST['pwd'];
$add =$_POST['add'];
$dob =$_POST['dob'];
$mail =$_POST['mail'];
$role =$_POST['role'];
$mobile =$_POST['mobile'];
$img =$_POST['img'];
$today = date("Y-m-d H:i:s");

include_once 'conf.php';

$q="insert into tbl_staff_details(inst_id,name,pwd,email,phone,photo,address,dob,role,created_date) values('".$insti."','".$name."','".$pwd."','".$mail."','".$mobile."','".$img."','".$add."','".$dob."','".$role."','".$today."')";

echo $q;

$r=mysqli_query($con,$q);

if($r)
{
    echo "Success";
}
else
{
    echo "Fail";
}

?> In the above file i am accessing all the information using $_POST[] sent by the $.post() method in the first file then i am trying to insert all the data in the database

Problem is that the data is not inserted in the database But when i omit the image all the other data is inserted in the database

Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Blue, Jul 28 '18 at 20:43
**WARNING**: When using `mysqli` you should be using [parameterized queries](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and [`bind_param`](http://php.net/manual/en/mysqli-stmt.bind-param.php) to add user data to your query. **DO NOT** use string interpolation or concatenation to accomplish this because you have created a severe [SQL injection bug](http://bobby-tables.com/). **NEVER** put `$_POST`, `$_GET` or **any** user data directly into a query, it can be very harmful if someone seeks to exploit your mistake. — tadman, Jul 28 '18 at 20:50
Note: The object-oriented interface to `mysqli` is significantly less verbose, making code easier to read and audit, and is not easily confused with the obsolete `mysql_query` interface. Before you get too invested in the procedural style it’s worth switching over. Example: `$db = new mysqli(…)` and `$db->prepare("…")` The procedural interface is an artifact from the PHP 4 era when `mysqli` API was introduced and should not be used in new code. — tadman, Jul 28 '18 at 20:50

score 0 · Answer 1 · answered Jul 28 '18 at 22:49

Ok first you need to use FormData() in your javascript

example

// formdata
var formdata = FormData();

var insti=$("#inst_id").val();
var name=$("#Staff_name").val();
var pwd=$("#Staff_pwd").val();
var add=$("#staff_address").val();
var dob=$("#Staff_dob").val();
var mail=$("#Staff_mail").val();
var role=$("#Staff_role").val();
var mobile=$("#Staff_mobile").val();
var img = $('#image').prop('files')[0];

formdata.append('upload[insti]', insti);
formdata.append('upload[name]', name);
formdata.append('upload[pwd]', pwd);
formdata.append('upload[add]', add);
formdata.append('upload[dob]', dob);
formdata.append('upload[mail]', mail);
formdata.append('upload[role]', role);
formdata.append('upload[mobile]', mobile);
formdata.append('upload[img]', img);


// now send 

$.post("add_faculty2.php", formdata, 
    function(data,status){
      $("#msg").text(data);
      alert(data);

      alert(status);
    }
);

And in your php script you can access the image by calling

$img = $_FILES['upload']['img']['name'];
$img_tmp = $_FILES['upload']['img']['tmp_name'];

others

$insti = $_POST['upload']['insti'];
$name = $_POST['upload']['name'];
$pwd = $_POST['upload']['pwd'];
$add = $_POST['upload']['add'];
$dob = $_POST['upload']['dob'];
$mail = $_POST['upload']['mail'];
$role = $_POST['upload']['role'];
$mobile = $_POST['upload']['mobile'];
$today = date("Y-m-d H:i:s");


// you can see the image printed here..
var_export($img);

Hope this helps.

Send image to other page using $.post() method

1 Answers1