如何通过ajax load（）函数发送图像文件并通过php在div中插入mysql db显示

Question

This is form i am sending image file to the upload.php script file and image file should display in the 'onsuccessmsg' div

<form action="upload.php" method="POST" id="uploadform">
   <input type="file" file="file" id="file_to_send"/>
   <input type="submit" value="Upload"/><br/><br/>
   Message :
   <div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"></div>
  </form>

This is the JavaScript code:

<script>

$(document).ready(function(){

$("#uploadform").on('submit',function(){


        $("#onsuccessmsg").load("upload.php",{},function(res){

        });

});
});
</script>

This is the upload.php file:

<?php

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){

 $name = $_FILES['file']['name'];
 $size = $_FILES['file']['size'];
 $tmp  = $_FILES['file']['tmp_name'];

 if(move_uploaded_file($tmp, "./uploads/".$imgn))
    {
     echo "File Name : ".$_FILES['file']['name'];
     echo "<br/>File Temporary Location : ".$_FILES['file']['tmp_name'];
     echo "<br/>File Size : ".$_FILES['file']['size'];
     echo "<br/>File Type : ".$_FILES['file']['type'];
     echo "<br/>Image : <img style='margin-left:10px;' src='uploads/".$imgn."'>";
    }
}

?>

Onsubmit the form how to send the name and id values to the upload.php file and echoing the image file in the onsuccessmsg div, I am confused, please help me.

Answer 1

You can use iframe for such upload of image with jquery...

$(document).ready(function()
{
    $("#input_for_image_upload").change(function()
    { 
       $("#img_upload").submit();
    });
});

Answer 2

You will get the image name through this code

$('#submit').click(function()
{
    var str=$("#image").val();
    var arr=str.split("\\");
    var image=arr[2];
    alert(image);
});