Блог

Я использую plupload, чтобы позволить пользователям загружать изображения. Но я также хочу сгенерировать эскизы для предварительного просмотра, прежде чем они, наконец, решат сохранить его. Я понимаю, что в настоящее время функция «Предварительный просмотр изображения» отсутствует в plupload. Поэтому, чтобы обойти это, я решил отправить новую форму, содержащую только один файл для каждого добавленного изображения, и позволить серверу обработать его и вернуть эскиз.

Теперь мой вопрос в том, как мне получить дескриптор объекта file из plupload, чтобы я мог динамически создавать поле файла «input».

В настоящее время я перебираю uploader.files и устанавливаю input.name но я не знаю, как установить поле input.value, поскольку, похоже, я не могу получить полный путь к добавленному файлу.

Я готов к любым предложениям (в дополнение к полной замене этого подхода), мне просто нужен эскиз файла, выбранного для загрузки.

Возможно, мой ответ немного запоздал, но сегодня я искал похожее решение и придумал следующий подход. Это будет работать только со средой выполнения HTML5.

Поскольку нет способа получить файловые объекты из plupload, я изменил событие onchange динамически созданного поля ввода и сохранил файловые объекты для себя. Это делается путем привязки к PostInit-событию.

После этого я могу показать изображение пользователю с помощью FileReader API, представленного в HTML 5. Таким образом, нет необходимости отправлять изображение на сервер. Смотрите мой прослушиватель с добавлением файлов ниже.

     // Currently added File Objects                
    var nativeFiles = {};

    var uploader = new plupload.Uploader({
        runtimes : 'html5,html4',
        // Your settings...
    });

    uploader.bind('PostInit', function(up, params) {
        // Initialize Preview.
        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) {
            // Your code...

            // Load Preview
            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 = "<img src='" e.target.result "'/>";
                      };
                })(nativeFiles[i], files[i].id);

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

    });