上传到服务器之前的 GWT 图片上传预览图片答案

【问题标题】：GWT image upload preview image before uploading to server上传到服务器之前的 GWT 图片上传预览图片
【发布时间】：2019-06-16 02:20:55
【问题描述】：

我正在使用 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 版本，所以我无法使用文件或路径库

【问题讨论】：

你试过了吗：stackoverflow.com/questions/23944924/…
我试过了。它从未到达 reader.onload。它读取了这一行并停止了 reader.readAsDataURL(image);此外，没有提供 imageLoaded() 方法，我无法在 loadImage() 中获得要识别的 java 方法

标签： java file-upload gwt

【解决方案1】：

您需要从元素中取出 File 对象...

你可以这样做：

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

如您所见，它使用 gwt 元素。

提取文件对象后，您可以执行以下操作：

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()) 就是钱。

它使用了大量的 elemental 和 elemental2 作为 stock gwt，只是没有让您充分了解您正在处理的实际 API。

还要注意，这使用了 elemental 中的 File 对象。

【讨论】：