How to upload an image using ajax and preview it - php

Question

Am trying to upload an image to images folder using ajax but its not working
when i choose an image then the image should upload to my folder in local hard drive and further i will use that.
Please help me
My Code is :
SCRIPT
$(document).ready(function() {
$('#pathAbout,#path,#pathWork').change(function(){
if($(this).val() !=""){
$.ajax({
type: "POST",
url: "imageLoad.php",
data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>",
success: function(msg){
alert(msg);
}
});
}
});
});
</script>
HTML
<form method="POST" action="tabs.php?page=HOME" enctype="multipart/form-data">
<table>
<tr>
<td><label>Choose Image</label></td>
<td><input type="file" id ="pathAbout" name="imgPath" /></td>
</tr>
</table>
</form>
PHP
if(!empty($_POST)) {
if((isset($_POST['name']) && $_POST['name'] != '') || (isset($_POST['type']) && $_POST['type'] != '') ||(isset($_POST['tmp_name']) && $_POST['tmp_name'] != ''))
{
$name = $_POST['name'];
$type = $_POST['type'];
$tmp_name = $_POST['tmp_name'];
$extension = strtolower(substr($name, strpos($name , '.') +1));
if(($extension == 'png' || $extension == 'jpeg' || $extension == "jpg")&&($type == "image/png" || $type == "image/jpeg" || $type == "image/jpg"))
{
$location = 'images/';
if(move_uploaded_file($tmp_name,$location."$name"))
{
echo "Loaded";
} else {
echo "Error occured";
}
} else {
echo "Unsupported file format";
}
} else {
echo "Please choose a file";
}
} else {
echo "No Information found";
}
This is my code but nothing is happening when i choose a file

Answer 1

If you want you can use Uploadify here you can also see demo and for sample code for eg-
$(function() {
$("#file_upload").uploadify({
'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", "someOtherKey", 2);
}
});
});
$("#image_upload2").uploadify(uploadifyBasicSettingsObj);
uploadifyBasicSettingsObj.onUploadSuccess = function(file, data, response)
{
$('.tempImageContainer2').find('.uploadify-overlay').show();
/* Here you actually show your uploaded image.In my case im showing in Div */
$('.tempImageContainer2').attr('style','background- image:url("../resources/temp/thumbnail/'+data+'")');
$('#hidden_img_value2').attr('value',data);
}
The HTML code:
<div class="boxWrapper tempImageContainer2" data-image-container-id="2">
<input type="file" accept="gif|jpg" name="image2" style="" id="image_upload2"/>
<input type="hidden" value="" name="image[]" id="hidden_img_value2">
<input type="hidden" name="upload_path" value="" id="upload_path2" class="upload_path">
<div class="uploadify-overlay">Change</div>
<a class="remove-pic-link" href="javascript:void(0)" style="display:none">Remove</a>
</div>

Answer 2

It is not possible to upload an image directly using AJAX, but there are some libraries that create dynamic iframes to accomplish this.
Check out this one, which I have used in several projects: valums.com/ajax-upload. It even comes with example serverside code for several PHP application frameworks.

Answer 3

You can't upload file using AJAX , you need to use a trick consisting a 'iframe' and the web form , also some javascript.
This link may help you.

Answer 4

HTML
<div class="field">
<label class="w15 left" for="txtURL">Logo:</label>
<img id="logoPreview" width="150px" height="150px" src='default.jpg' />
<input class="w60" type="file" name="txtURL" id="txtURL" />
</div>
JQuery
$('#txtURL').on('change', function(){
$.ajaxFileUpload({
type : "POST",
url : "ajax/uploadImage",
dataType : "json",
fileElementId: 'txtURL',
data : {'title':'Image Uploading'},
success : function(data){
$('#logoPreview').attr('src', data['path']);
},
error : function(data, status, e){
alert(e);
}
});
});
Ajax controller:
public function uploadImage()
{
$status = "";
$msg = "";
$filename='';
$file_element_name = 'txtURL';//Name of input field
if (empty($_POST['title'])){
$status = "error";
$msg = "Please enter a title";
}
if ($status != "error"){
$targetPath = ''.date('Y').'/'.date('m').'/';
if(!file_exists(str_replace('//','/',$targetPath))){
mkdir(str_replace('//','/',$targetPath), 0777, true);
}
$config['upload_path'] = $targetPath;
$config['allowed_types'] = 'jpg|png|jpeg';
$config['max_size'] = 150000;
$config['file_name']=time(); //File name you want
$config['encrypt_name'] = FALSE;
$this->load->library('upload', $config);
$this->upload->initialize($config);
if(!$this->upload->do_upload($file_element_name)){
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else{
$data = $this->upload->data();
$filename = $targetPath.$data['file_name'];
}
//#unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg,'path'=>$filename));
}
Add Ajaxfileupload.js

Answer 5

You can't upload an image directly using AJAX
The answer is in response to this:
data: "name = <?php echo $_FILES['imgPath']['name']; ?>&type=<?php echo $_FILES['imgPath']['type']; ?>&tmp_name=<?php echo $_FILES['imgPath']['tmp_name']; ?>",