php - upload multiple files with ajax and jquery -
in code there single form contains 2 input elements:
text input ,
file input (which contain image).
i appending each file input on button click , want upload images in ajax call, in php file final image , value of text input.
my html , jquery code follows:
html code
<html> <body> <form name="ajax_image" id="ajax_image" method="post"> <input type="text" name="project_name" id="project_name" placeholder="project name" /><br/><br/> <input type="text" name="project_duration" id="project_duration" placeholder="project duration" /><br/><br/> <div id="image_uploads"> <input type="file" name="project_image[]" class="project_image" placeholder="project image" /> <input type="button" name="add_upload" id="add_upload" value="+" /> <br/><br/> </div> <input type="submit" name="submit" id="submit" value="submit" /> </form> </body> </html> jquery code
<script> $(document).ready(function () { var count=0; $("#add_upload").click(function(){ var input = '<input type="file" name="project_image[]" class="project_image" placeholder="project image"/><br/><br/>' $("#image_uploads").append(input); count++; }); $("#ajax_image").submit(function (event) { event.preventdefault(); var data = new formdata(); for(var j=0 ; j<= count ; j++) { // alert(j); $.each($(".project_image")[j].files, function (i, file) { data.append(i, file); }); } $.each($('#ajax_image').serializearray(), function (i, obj) { data.append(obj.name, obj.value) }); $.ajax({ url: "http://localhost/hetal/multi_image_php_ajax.php", type: "post", data: data, processdata: false, contenttype: false, success: function () { alert('form submitted!'); }, error: function () { alert("error in ajax form submission"); } }); }); }); </script> php file
<?php print_r($_post); print_r($_files); ?>
after document ready add variable:
var filecounter = 0; pass first parameter of append method, increment.
$.each($(".project_image")[j].files, function (i, file) { data.append(filecounter, file); filecounter++; }); the problem sent 2 files same name in post request. can see opening ajax request , click post tab in firebug. both files, every next file overrides previous one:
content-disposition: form-data; name="0"; edit: exists simpler solution pass j first parameter of append without clutter:
for(var j=0 ; j<= count ; j++) { $.each($(".project_image")[j].files, function (i, file) { data.append(j, file); }); } edit 2
it can done using multiple attribute of file input. wouldn't neccessary add other inputs, send them in once.
html:
<form name="ajax_image" id="ajax_image" method="post" enctype="multipart/form-data"> <input type="text" name="project_name" id="project_name" placeholder="project name" /><br/><br/> <input type="text" name="project_duration" id="project_duration" placeholder="project duration" /><br/><br/> <input type="file" name="project_images" class="project_images" placeholder="project image" multiple /><br/><br/> <input type="submit" name="submit" id="submit" value="submit" /> </form> js:
$(document).ready(function () { $("#ajax_image").submit(function (event) { var data = new formdata(); event.preventdefault(); $.each($(".project_images")[0].files, function (key, file){ data.append(key, file); }); $.each($('#ajax_image').serializearray(), function (i, obj) { data.append(obj.name, obj.value) }); $.ajax({ url: "upload.php", type: "post", data: data, processdata: false, contenttype: false, success: function () { alert('form submitted!'); }, error: function () { alert("error in ajax form submission"); } }); }); }); 
Comments
Post a Comment