Html Php Ajax image upload

Question

i have a small problem at a multi image upload. If I select multiple photos it works great, but if i upload 3 pictures and and upload another 1, it only takes that last picure. For example

and after I upload another one

i want that when I select a new picture, the array lenght to be 4, the 3 initial picture and the new one (giving a number example), but i don't know how, can you give me some information/documentation. The Code

<div>
            <label for="image">Add Picture</label>
            <input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>

    </div>

    <div class="image_preview" id="image_preview"></div>


<div>

and the javascript

 <script>
$(document).ready(function() 
{ 
 $('form').ajaxForm(function() 
 {
  alert("Uploaded SuccessFully");
 }); 
});

function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 for(var i=0;i<total_file;i++)
 { 

  $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
 }
}
</script>

Answer 1

It is not your code problem. When you browse for file and select file for upload and after click on "OK", this input field remove it's old value.