При использовании plupload HOWTO, если выбран файл-дубликат, и отправьте его отдельно для соответствующей обработки на стороне сервера. - PullRequest
Новая
       52

При использовании plupload HOWTO, если выбран файл-дубликат, и отправьте его отдельно для соответствующей обработки на стороне сервера.

4 голосов
/ 29 мая 2011

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

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

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

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

1 Ответ

3 голосов
/ 01 августа 2011

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

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

После этого я могу показать изображение пользователю с помощью API-интерфейса FileReader, представленного в 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]);
            }
        }

    });
...