Lors de l'utilisation de plupload Comment dupliquer un objet de fichier lors de la sélection et le soumettre séparément pour un traitement côté serveur connexe

Question

Je suis en train d'utiliser plupload pour permettre aux utilisateurs de télécharger des images. Mais je veux aussi générer des miniatures pour prévisualisation avant qu'ils ne décident de les conserver. Je comprends actuellement que la fonction "Aperçu de l'image" n'est pas présente dans plupload. Donc, pour contourner cette limitation, j'ai décidé de soumettre un nouveau formulaire contenant un seul fichier pour chaque image ajoutée, et de laisser le serveur le traiter et renvoyer une miniature.

Maintenant, ma question est : comment puis-je obtenir le gestionnaire de l'objet fichier à partir de plupload afin de pouvoir créer dynamiquement un champ de type "input" pour fichier ?

Actuellement, je parcours les fichiers de l'uploader et je définis input.name mais je ne sais pas comment définir le champ input.value, puisque je ne semble pas pouvoir obtenir le chemin complet du fichier ajouté.

Je suis ouvert à toute suggestion (en plus de remplacer complètement cette approche), j'ai juste besoin de la miniature du fichier sélectionné pour le téléchargement.

Answer 1

Peut-être ma réponse est un peu tardive, mais j'ai cherché aujourd'hui une solution similaire et j'ai trouvé l'approche suivante. Cela ne fonctionnera qu'avec le Runtime HTML5.

Comme il n'y a pas de moyen d'obtenir les objets de fichier de plupload, j'ai modifié l'événement onchange du champ d'entrée créé dynamiquement et j'ai stocké les objets de fichier pour moi-même. Cela est fait en se liant à l'événement PostInit.

Après cela, je peux montrer l'image à l'utilisateur en utilisant l'API FileReader introduite avec HTML 5. Il n'est donc pas nécessaire d'envoyer l'image au serveur. Voir ci-dessous mon écouteur FilesAdded.

    // Objets de fichier actuellement ajoutés                
    var nativeFiles = {};

    var uploader = new plupload.Uploader({
        runtimes : 'html5,html4',
        // Vos paramètres...
    });

    uploader.bind('PostInit', function(up, params) {
        // Initialiser l'aperçu.
        if(uploader.runtime == "html5") {
            var inputFile = document.getElementById(uploader.id + '_html5');
            var oldFunction = inputFile.onchange;

            inputFile.onchange = function() {
                nativeFiles = this.files;
                oldFunction.call(inputFile);
            }
        }
    });

    uploader.bind('FilesAdded', function(up, files) {       
        for (var i in files) {
            // Votre code...

            // Charger l'aperçu
            if(uploader.runtime == "html5") {
                var fileObject = uploader.getFile(files[i].id);
                var reader = new FileReader();

                reader.onload = (function(file, id) {
                    return function(e) {
                        var span = document.getElementById('thumb_'+id);
                        span.innerHTML = "";
                      };
                })(nativeFiles[i], files[i].id);

                reader.readAsDataURL(nativeFiles[i]);
            }
        }

    });