Cross-browser simple, téléchargement de fichiers jQuery / PHP avec barre de progression

Question

Je sais qu'il existe plusieurs sujets à ce sujet, mais aucun d'entre eux n'a offert une solution définitive pour un script de téléchargement de fichier qui:

Fonctionne sur IE7 +
Dispose d'une barre de progression (sur chaque navigateur)
Pas de flash (ou de secours)

Des solutions?

blasteralfred Ψ · Accepted Answer

Vous pouvez utiliser Axuploader par AlbanX. Il a obtenu;

Téléchargement de fichiers multiples sur tous les navigateurs
Sélection de fichiers multiples sur les navigateurs html5 (pas IE)
Téléchargez les informations de progression sur les navigateurs html5
Informations sur la taille des fichiers sur les navigateurs html5
Pas de flash, pas de Silverlight, sur d'autres plugins, uniquement JavaScript
Prise en charge IE 6+, Firefox 2+, Safari 2+, Chrome 1+
Téléchargez des fichiers par morceau, pour plus de performances
Ne dépend pas de la taille maximale du message du serveur et des limites de taille maximale du fichier de téléchargement

Vous pouvez également essayer Fine-Uploader par Widen. Il a obtenu;

Sélection de plusieurs fichiers, barre de progression dans FF, Chrome et Safari
Sélection de fichiers par glisser-déposer dans FF, Chrome et Safari (OS X)
Les téléchargements sont annulables
Aucune dépendance externe du tout si vous utilisez FineUploader ou FineUploaderBasic. Si vous utilisez l'encapsuleur jQuery en option, jQuery est bien sûr requis.
FineUploaderBasic nécessite uniquement le fichier javascript Fine Uploader associé. Tous les fichiers CSS et images de Fine Uploader peuvent être omis.
N'utilise pas Flash
Fonctionne pleinement avec HTTPS
Testé dans IE7 +, Firefox, Safari (OS X), Chrome, IOS6 et diverses versions d'Android. IE10 est désormais également pris en charge!
Possibilité de télécharger des fichiers dès qu'ils sont sélectionnés, ou de les "mettre en file d'attente" pour les télécharger ultérieurement à la demande de l'utilisateur
Afficher des messages d'erreur spécifiques du serveur en cas d'échec de téléchargement (survoler l'élément de téléchargement ayant échoué)
Possibilité de réessayer automatiquement les téléchargements ayant échoué
Option pour permettre aux utilisateurs de réessayer manuellement un téléchargement ayant échoué
Créez votre propre validateur de fichier et/ou utilisez certains validateurs par défaut inclus avec Fine Uploader
Recevoir un rappel à différentes étapes du processus de téléchargement
Envoyez tous les paramètres côté serveur avec chaque fichier.
Téléchargez des répertoires par glisser-déposer (Chrome 21+).
Incluez les paramètres dans la chaîne de requête OR le corps de la requête.
Soumettez des fichiers à télécharger via l'API.
Fractionner un fichier en plusieurs requêtes (segmentation/partitionnement de fichier).
Reprendre les téléchargements échoués/arrêtés des sessions précédentes
Supprimer les fichiers téléchargés
Prise en charge de CORS
Téléchargez tous les objets Blob via l'API.
Définissez et appliquez facilement une limite maximale d'articles.
Téléchargez des images via coller (Chrome).
Module autonome de glisser-déposer de fichiers et de dossiers. Intégré par défaut au mode FineUploader.
Effectuer des tâches asynchrones (non bloquantes) dans les rappels qui influencent le ou les fichiers associés
Téléchargez des images directement depuis la caméra d'un appareil mobile
Récupérer des statistiques pour les fichiers téléchargés et recevoir des rappels sur les changements d'état
Et beaucoup plus!

Ou plugin jQuery-File-Upload (compatible avec IE), qui a obtenu;

Téléchargement de fichiers multiples: permet de sélectionner plusieurs fichiers à la fois et de les télécharger simultanément.
Prise en charge du glisser-déposer: permet de télécharger des fichiers en les faisant glisser depuis votre bureau ou votre gestionnaire de fichiers et en les déposant sur la fenêtre de votre navigateur.
Barre de progression du téléchargement: affiche une barre de progression indiquant la progression du téléchargement pour les fichiers individuels et pour tous les téléchargements combinés.
Téléchargements annulables: les téléchargements de fichiers individuels peuvent être annulés pour arrêter la progression du téléchargement.
Reprise des téléchargements: les téléchargements abandonnés peuvent être repris avec les navigateurs prenant en charge l'API Blob.
Téléchargements groupés: les fichiers volumineux peuvent être téléchargés en blocs plus petits avec des navigateurs prenant en charge l'API Blob.
Redimensionnement des images côté client: les images peuvent être automatiquement redimensionnées côté client avec des navigateurs prenant en charge les API JS requises.
Aperçu des images: un aperçu des fichiers image peut être affiché avant le téléchargement avec des navigateurs prenant en charge les API JS requises.
Aucun plug-in de navigateur (par exemple Adobe Flash) requis: la mise en œuvre est basée sur des normes ouvertes telles que HTML5 et JavaScript et ne nécessite aucun plug-in de navigateur supplémentaire.
Solution de rechange élégante pour les navigateurs hérités: télécharge des fichiers via XMLHttpRequests si elle est prise en charge et utilise des iframes comme solution de rechange pour les navigateurs hérités.
Remplacement du formulaire de téléchargement de fichier HTML: affiche un formulaire de téléchargement de fichier HTML standard si JavaScript est désactivé.
Téléchargements de fichiers intersites: prend en charge le téléchargement de fichiers vers un autre domaine avec XMLHttpRequests intersites.
Plusieurs instances de plug-in: Permet d'utiliser plusieurs instances de plug-in sur la même page Web.
Personnalisable et extensible: fournit une API pour définir des options individuelles et définir des méthodes de rappel pour divers événements de téléchargement.
Téléchargements de flux de contenu en plusieurs parties et de fichiers: les fichiers peuvent être téléchargés en tant que flux de contenu de fichiers ou de données de formulaire standard (téléchargement de fichiers HTTP PUT).
Compatible avec toute plate-forme d'application côté serveur: fonctionne avec toute plate-forme côté serveur (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) qui prend en charge le fichier de formulaire HTML standard téléchargements.

Les références

Consultez 10 Téléchargement de fichier HTML5 avec exemple jQuery pour voir de grands téléchargeurs de fichiers qui fonctionnent avec HTML5

Aussi, ici 10+ PHP Tutoriels Ajax Upload File - Téléchargement gratuit vous pouvez choisissez parmi de nombreux uploaders.

user1335639 · Answer

Je pense que ce qui suit est la chose dont vous avez besoin, ils prennent également en charge la progression du téléchargement dans IE par composant Flash

http://yuilibrary.com/yui/docs/uploader/
http://www.plupload.com/documentation.php

Scott Weinert · Answer

http://www.plupload.com/ est disponible en plusieurs exécutions et présente une dégradation gracieuse. Si HTML5 est pris en charge, il peut également effectuer des téléchargements par glisser-déposer.

AlphaMale · Answer

Utilisez ceci:

http://valums.com/ajax-upload/

Pas de Flash, Simple Jquery.

Caractéristiques

sélection de plusieurs fichiers, barre de progression dans FF, Chrome, Safari

sélectionner un fichier par glisser-déposer dans FF, Chrome

les téléchargements sont annulables

pas de dépendances externes

n'utilise pas Flash

fonctionne pleinement avec https

prise en charge du clavier dans FF, Chrome, Safari

testé dans IE7,8; Firefox 3,3,6,4; Safari4,5; Chrome; Opera10.60;