how to upload image using ajax in php - php

Question

<div class="control-group">
<label class="control-label" for="inputEmail">Image</label>
<div class="controls">
<input type="file" value="Browse" name="image" id="image" />
<span style="color: #61625F; font-weight: bolder;" class="sixth"></span>
</div>
</div>
ajax code below
$("#reg").click(function() {
$.ajax({
url: "process_service_person_register.php",
type: "post",
data: "image": $("#image").val()},
});
how will i send the image to the "process file"

Answer 1

You have to use the FormData object.
<script>
if ("FormData" in window)
{
var fd = new FormData();
fd.append('file', $('#image')[0].files[0]);
$.ajax({
url: "process_service_person_register.php",
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(result) {
console.log(result);
}
});
}
else
{
console.log('sorry, FormData object is not available.');
}
</script>
Without FormData, you will have to go old school like using the hidden iframe method

Answer 2

Here is my php page when i post through ajaxform
<?php
include('phpfunc.php');
$path = "images/news/";
$utime = time();
$valid_formats = array("jpg", "png", "bmp","jpeg","gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = strtolower($_FILES['uploadnews']['name']);
if(strlen($name)){
$extpos = strrpos($name, '.', -1);
$ext = substr($name,$extpos+1);
if(in_array($ext,$valid_formats)){
$actual_image_name = $utime.".".$ext;
$fpath = $path.$actual_image_name;
$tmp = $_FILES['uploadnews']['tmp_name'];
if(move_uploaded_file($tmp, '../'.$fpath)){
echo $fpath;
}else{
echo "failed";
}
}else{
echo "Invalid file format..";
}
}else{
echo "Please select image..!";
}
exit;
}
?>

Answer 3

There is no way to upload files using AJAX
BUT, you can imitate the behavior of AJAX by using hidden Iframe (other ways exists - but this is the most compatible way for old and new browsers)
for example:
This is your form:
<form target="upload_frame" action="upload_handler.php" method="POST" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label" for="inputEmail">Image</label>
<div class="controls">
<input type="file" value="Browse" name="image" id="image" />
<span style="color: #61625F; font-weight: bolder;" class="sixth"></span>
</div>
</div>
</form>
Now you should have a hidden IFrame inside your page, and name it upload_frame
<iframe name="upload_frame" id="upload_frame" width="1" height="1" frameborder="no" ></iframe>
And in upload_handler.php or whatever file that suppose to handle your upload request you should output something like
<script type="text/javascript">
window.parent.onUploadCallback(callback_data);
</script>
This will call onUploadCallback function set on the original's page JavaScript.
The callback_data parameter better be JSON serialized so you can use it inside the function as a native JavaScript object.
For example:
function onUploadCallback(response){
if(response.success)
alert("File uploaded: "+response.file_path);
} else {
alert("Error while uploading the file: "+response.error_message);
}
}
For making the all thing more generic - you should use "JSONP" like style and pass "callback" parameter to upload_handler.php with the name of the function you want to call. and then add it to the form as hidden field <input type="hidden" name="callback" value="window.parent.onSuccessCallback" />
After all that description - my real suggestion to you is - use an already made jQuery library for the task