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版本，所以我不能使用文件或路径库

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元素。

提取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（））才是最赚钱的。

它使用了大量的elemental和elemental2，因为股票gwt不能使您充分了解要处理的实际API。

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

GWT图片上传预览图片，然后上传到服务器

1 个答案: