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>

Make sure you have that multipart thing in your <form> element. — node_modules
– node_modules, Commented Feb 23, 2017 at 7:59
I have it enctype="multipart/form-data , without it i couldn't submit the files — Viorel WWI
– Viorel WWI, Commented Feb 23, 2017 at 8:04

Emran · Accepted Answer · 2017-02-23 09:59:50Z

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.

edited Feb 23, 2017 at 9:59

answered Feb 23, 2017 at 8:21

Emran

1881 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Viorel WWI Over a year ago

How can i change the ok status that it will not remove the old values , but add the new value to the old values ?

Reuben Gomes Over a year ago

you will need to do uplad the content to a tmp folder ......on your server then if he adds another image it will upload the new image to the server again store thier names in session when he finishes uploading movee all the files from temp(compare with session) to permnent folder

Emran Over a year ago

It is not possible to change "Ok" status, Browser and html responsible for this. You can do it by @Gomes way. If you have multiple user from same ip you can make unique session or something like that at your server or client side to track which user upload.

Collectives™ on Stack Overflow

Html Php Ajax image upload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related