Alors oui il s’agit d’une des fonctionnalités auquel vous n’allez pas y réchapper, à chaque fois on s’arrache les cheveux car :
Mes fichiers sont volumineux et le navigateur rame voir plante
Comment dealer proprement entre le réseau, notre serveur et notre navigateur.
L’idée de base c’est d’utiliser le format binaire blob et de l’envoyer sur le réseau par petits morceaux chunk de cette manière vous éviterez le fameux error 500 ou la page qui mouline à n’en plus finir.
Coté serveur il va falloir consolider l’ensemble de ces chunks pour retrouver notre fichier alors la c’est du boulot et qu’en est il si le fichier plante lors de son envoi est ce que l’on doit tout renvoyer à nouveau?
Bon je vous dévoile une librairie vraiment robuste que j’utilise dans certains projets et qui résout ces problèmes et en plus opensource voici le lien le développeur a vraiment bien taffé
https://github.com/blueimp/jQuery-File-Upload
Ce que je kiffe :
- Vous pouvez drag and dropper vos fichiers
- Uploader plusieurs fichiers
- Faire une pause sur l’envoi de fichier
- Vous pouvez limiter la taille des fichiers à envoyer
- Vérifier le type de fichier qui est envoyé
Très simple à utiliser elle repose sur Jquery
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: '/post/private/myfiles',
autoUpload: false,
singleFileUploads:true,
sequentialUploads:true,
acceptFileTypes: '@',
maxChunkSize: 1000000,
maxFileSize:{{@config("test.maxsize_filesupload")}},
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true,});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
))
.on('fileuploadadd', function (e, data) {
}).on('fileuploadsubmit', function (e, data) {
}).on('fileuploadfailed', function (e, data) {
});
});
});
Je la recommande car les exemples fournis avec sont vraiment complets
et je balance un peu elle s’intègre facilement avec vos frameworks favoris ..Laravel par exemple 😉