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
My jquery
<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>
The 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
Aucun commentaire:
Enregistrer un commentaire