Afficher une progression sur le téléchargement de plusieurs fichiers Jquery / Ajax
J'ai télécharger le formulaire qui permet aux utilisateurs de télécharger de multiples fichiers. J'ai décidé qu'une barre de progression serait bien si les fichiers sont assez volumineux. Ci-dessous mon code source. Je suis nouveau sur jquery normalement, je voudrais juste le php, mais je trouve que l'ajax est plus convivial.
<div id="new_upload">
<div class="close_btn"></div>
<div id="uploads"></div>
<form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
<fieldset><legend>Upload an image or video</legend>
<input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
</fieldset>
<div class="bar">
<div class="bar_fill" id="pb">
<div class="bar_fill_text" id="pt"></div>
</div>
</div>
</form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){
//Progress bar
console.log(total);
$('#pb').width(percentComplete + '%') //update progressbar percent complete
$('#pt').html(percentComplete + '%'); //update status text
}
function beforeSubmit(){
console.log('ajax start');
}
function afterSuccess(data){
console.log(data);
}
$(document).ready(function(e) {
$('#upload_file').submit(function(event){
event.preventDefault();
var filedata = document.getElementById("file");
formdata = new FormData();
var i = 0, len = filedata.files.length, file;
for (i; i < len; i++) {
file = filedata.files[i];
formdata.append("file[]", file);
}
formdata.append("json",true);
$.ajax({
url: "global.func/file_upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
dataType:"JSON",
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSubmit: beforeSubmit,
uploadProgress:OnProgress,
success: afterSuccess,
resetForm: true
});
});
});
</script>
L'image de téléchargement fonctionne très bien, le tableau de l'envoyer à l'ajax mais la barre de progression ne bouge pas. En fait la console.journal pour les deux fonctions appelées besoin pour produire ce n'apparaissent pas non plus. Est-il une bonne façon d'appeler les fonctions dans ma requête ajax qui permettrait d'obtenir cette barre de progression pour le travail.
beforeSubmit: beforeSubmit,
uploadProgress:OnProgress,
succès: afterSuccess,
NOTER que cette fonction de la réussite: afterSuccess' est de travail que la console est l'affichage de mes données.
source d'informationauteur Paul Ledger | 2014-04-22
Vous devez vous connecter pour publier un commentaire.
C'est votre formulaire HTML
C'est votre JQuery et ajax.
Par défaut, le fileInput est caché.
Cliqué sur le Bouton de téléchargement de
Votre code php ressemble à ceci
Vous devez utiliser un custom XMLHttpRequest pour ce faire avec AJAX et jQuery. Il y a un exemple ici: Comment puis-je télécharger des fichiers de manière asynchrone?