Avec HTML5 , vous POUVEZ faire des uploads de fichier avec l'Ajax et jQuery. Non seulement cela, vous pouvez faire de validation de fichier (le nom, la taille, et le MIME-type) ou la poignée de l'événement progress avec le HTML5 progrès de la balise (ou un div). Récemment, j'ai eu à faire un fichier uploader, mais je ne voulais pas utiliser de Flash , ni des Images ou des plugins et après quelques recherches j'ai trouvé la solution.
Le code HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
Tout d'abord, vous pouvez faire la validation de certains si vous voulez. Par exemple, dans l'événement onChange du fichier:
$(':file').change(function(){
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
//Your validation
});
Maintenant, l'Ajax soumettre avec le click du bouton:
$(':button').click(function(){
var formData = new FormData($('form')[0]);
$.ajax({
url: 'upload.php', //Server script to process data
type: 'POST',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: beforeSendHandler,
success: completeHandler,
error: errorHandler,
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
Maintenant, si vous souhaitez gérer le progrès.
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
Comme vous pouvez le voir, avec HTML5 (et quelques recherches) téléchargement du fichier ne sera pas seulement possible, mais super facile. Essayez avec Google Chrome comme certains des composants HTML5 les exemples ne sont pas disponibles dans tous les navigateurs.
