Hello I just starting learning jquery ajax to upload file.
I'm using simple html form here and embedding javascript/jquery code in it to perform ajax request.
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='jquery-2.1.3.min.js'></script>
</head>
<body>
<form id='entryform' method="">
<input id='formText' type='text' name='text'><br>
<input id='formFile' type='file' name='file'>
</form>
<div id='fill'></div>
</body>
<script>
$(document).ready(function(){
$('#entryform').change(function(e){
e.preventDefault();
$.ajax({
url : 'ajax.php',
data : new FormData(this),
processData : false,
contentType : false,
type : 'POST',
success : function (retval){
$('#fill').html(retval);
}
});
});
});
</script>
And this is the PHP code for process :
<?php
$updir = 'images/';
move_uploaded_file($_FILES['file']['tmp_name'], $updir.$_FILES['file']['name']);
//echo $updir._FILES['file']['name'];
echo "<img src='".$updir.$_FILES['file']['name']."'>";
I the above code i'm trying to upload an image without reloading the page and show the image to the immadiately after the image has been uploaded.
But when i'm trying to run the code, I'm getting a weird behaviour, that is when entering the input to text form the value from the text form that was newly entered is showing immediately.
I mean I want the form file is showed immediately to the user when uploading done not the form text.
Any idea how to fix this? without omitting the text form ?
