GWT изображение загрузить предварительный просмотр изображения перед загрузкой на сервер

Question

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

 HorizontalPanel row = new HorizontalPanel();
        row.add(accounts = new ListBox());
        accounts.setWidth("200px");
        row.setStyleName("accountPositioning");
        accounts.setName("accounts");
        final Image image = new Image();
        image.setStyleName("previewImage");

        setCellSpacing(10);

        panel = new VerticalPanel();
        panel.add(row);
        panel.add(image);

        final FormPanel form = new FormPanel();
        form.setEncoding(FormPanel.ENCODING_MULTIPART);
        form.setMethod(FormPanel.METHOD_POST);

        downloadPanel = new FormPanel();
        downloadPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
        downloadPanel.setMethod(FormPanel.METHOD_GET);

        deletePanel = new FormPanel();
        deletePanel.setEncoding(FormPanel.ENCODING_MULTIPART);
        deletePanel.setMethod(FormPanel.METHOD_POST);

        upload = new FileUpload();
        upload.setName("upload");
        upload.setStyleName("chooseImageButton");
        upload.setEnabled(false);
        upload.setVisible(false);

        VerticalPanel holder = new VerticalPanel();
        uploadButton = new Button("Import");
        uploadButton.setEnabled(false);
        uploadButton.setStyleName("importImageButton");
        uploadButton.setVisible(false);

        uploadButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {

                String filename = upload.getFilename();    

                if (filename.length() == 0) {
                    Window.alert("No File Specified!");
                } else {
                    int selectedIndex = accounts.getSelectedIndex();
                    accountIdStr = accounts.getValue(selectedIndex);
                    form.setAction(GWT.getModuleBaseURL()+"uploadfile" + "?entityId="+ accountIdStr);
                    form.submit();
                }
            }
        });

Как я могу получить путь к файлу загрузки файла изображения с помощью GWT FileUpload (), чтобы я мог просмотреть изображение перед его отправкой всервер?

Я использую версию GWT 2.7.0, поэтому я не могу использовать File или Path library

Answer 1

Вам понадобится получить объект File из элемента ...

И вы можете сделать это так:

@Override
public elemental.html.FileList fileSelected(FileUpload fileUpload) {
    final elemental.html.InputElement element = (elemental.html.InputElement) fileUpload.getElement();
    return element.getFiles();
}

Как вы можете видеть, он использует gwt elemental.

После того, как вы извлекли объект File, вы можете сделать это:

import com.google.gwt.user.client.Element;
import elemental.html.File;
import elemental.html.ImageElement;
import elemental2.dom.FileReader;

    public void loadPreview(File file) {
        FileReader reader = new FileReader();
        reader.onloadend = pe -> {
            Element element0 = this.image.getElement();
            com.google.gwt.dom.client.Element element = element0;
            ImageElement image = (ImageElement) element;
            image.setSrc(reader.result.asString());

            image.addEventListener("load", evt -> {
                LOG.debug("image loaded event {}", evt);
                int owidth = image.getWidth();
                int oheight = image.getHeight();
                LOG.debug("widht {}', height {}", owidth, oheight);

                //IMAGE_VIEW_PORT_WIDTH
                //IMAGE_VIEW_PORT_HEIGHT

                int height;
                int width;

                if (owidth >= (destAspectRatio) * oheight) {
                    height = (int) Math.round(IMAGE_VIEW_PORT_WIDTH * (oheight / (double) owidth));
                    width = IMAGE_VIEW_PORT_WIDTH;
                } else {
                    width = (int) Math.round(IMAGE_VIEW_PORT_HEIGHT * (owidth / (double) oheight));
                    height = IMAGE_VIEW_PORT_HEIGHT;
                }
                image.setWidth(width);
                image.setHeight(height);
                this.image.setVisible(true);
                LOG.debug("new width {}, new height {}", width, height);

            });
            return null;
        };
        reader.readAsDataURL((elemental2.dom.File) file);
    }

Извините, это так сложно - это код, который у меня есть, и я думаю, что он определяет правильный размер порта просмотра, так что изображение установлено на правильный размер (хотя я не уверен на 100%). Вы можете обойтись без обработчика image.addEventListener ("load" ...), так как я считаю, что image.setSrc (reader.result.asString ()) является битом денег.

Он использует много элементалов и elemental2, так как фондовый gwt просто не дает вам достаточного представления о реальном API, с которым вы имеете дело.

Обратите внимание, что здесь используется объект File из elemental.