upload múltiplo de imagens com pre visualização

Boa tarde galera.

Tenho o seguinte código para upload múltiplo de imagens e com pre visualização.

Porém tem 1 problema.

Vamos supor, vou la e seleciono uma imagem ai ela aparece certinho, agora quero selecionar outra junto com essa que já selecionei, vou la seleciono mais uma imagem ela aparece tbm ao lado da que ja tinha sido selecionada, porém apenas a que eu selecionei por ultimo fica dentro do valor do input file. Se eu seleciono 3 de uma vez ai fica certo, as 3 aparecem e ficam as 3 dentro do input file, se eu seleciono uma de cada vez apenas a ultima fica no value.

<form action='' id="formpost" enctype="multipart/form-data" method='post' name='reenvia'>
<div id="upimgpost" ><input type="file" id="filearepost" name="files[]" max="5" multiple /></div>
</form>

<section id="previmgpost" class="previmgpostoff">

</section>

<script>
 function handleFileSelect(evt) {
 var files = evt.target.files; // FileList object

 // Loop through the FileList and render image files as thumbnails.
 for (var i = 0, f; f = files[i]; i++) {

 // Only process image files.
 if (!f.type.match('image.*')) {
 continue;
 }

 var reader = new FileReader();

 // Closure to capture the file information.
 reader.onload = (function(theFile) {
 return function(e) {
 // Render thumbnail.
 $("#previmgpost").removeClass("previmgpostoff");
 $("#previmgpost").addClass("previmgpost");
 var span = document.createElement('span');
 span.innerHTML = ['<img class="imagensup" src="', e.target.result,
 '" title="', escape(theFile.name), '"/>'].join('');
 document.getElementById('previmgpost').insertBefore(span, null);
 };
 })(f);

 // Read in the image file as a data URL.
 reader.readAsDataURL(f);
 }
 }

 document.getElementById('filearepost').addEventListener('change', handleFileSelect, false);
</script>