Search the Community
Showing results for tags 'ajax jquery php'.
-
I have this code I'm using to upload multiple images via ajax call. In console I can see the combined data being sent but not the multiple file names. Im not sure when sending multiple images what I should see in the network-paramaters view in console. This is what I'm seeing in console -----------------------------82392211927416 Content-Disposition: form-data; name="action" add_photo -----------------------------82392211927416 Content-Disposition: form-data; name="image"; filename="about-vimeo.png" Content-Type: image/png PNG <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var checked_box = $('input:checkbox:checked').val(); var file = _("image").files[0]; var imageFile =$("#image").val(); // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append( 'action','add_photo'); formdata.append("image", file); jQuery.each($("input[name^=image]")[0].files, function(i, file) { formdata.append('photo['+i+']', file); }); // formdata.append("video", vidName); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "includes/add_photo.inc.php?checked_box="+checked_box); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } </script> Html form <div id="photos"> <form enctype="multipart/form-data" name="add_photo" class="add_photo"> <?php while($row = mysqli_fetch_array($result4)){ ?> <div class="photoAlbum_list"> <div id="#photoAlbumId" class="albumPhoto"><?php echo $row['album_name'];?></div> <img src="image/mandinga_folder.png" class="folder"/> <input type="checkbox" class="photoAlbumId" id="photoAlbumList" value="<?php echo $row['albumid'];?>"/> </div> <?php } ?> </form> <div id="addPhotoInstruction" style="display:block">Please choose an Album to Upload Photo's to</div> <input name="image[]" id="image" type="file" multiple style="display:none" value=""/> <input onClick="uploadFile()" type="button" id="add_photo_but" class="add_photo_but" name="add_photo_but" value="Add Photo" form="add_photo" style="display:none"/> <progress id="progressBar" value="0" max="100" style="display:none"></progress> <h3 id="status" style="display:none"></h3> <p id="loaded_n_total" style="display:none"></p> </div> Can anyone confirm if this is what would be seen in multiple image upload and if not correct how I can show in the formdata the different file names I expected to see