Question

在我写的一个程序中，我想让用户通过文件选择对话框在本地机器上选择一个图像，然后能够将该图像的路径插入{ {1}}标记的{1}}属性。

src

我现在正在使用GWT并尝试了img课程，但<img src="file:/path/to/selected/image.png">方法在大多数浏览器下都没有返回真实路径 - Windows Chrome将其返回为{{ 1}}。

有没有办法，无论是在GWT还是本机Javascript下，都能获得本地选择文件的真实路径？

Answer 1

我认为您有兴趣在GWT上的服务器上传之前在客户端上显示图像。

请看下面的帖子：

show image on client before upload on server in gwt

Answer 2

无法从使用javascript的浏览器获取本地选定文件的真实路径。它＆＃39;安全问题。使用HTML5，您可以获得图像本身并实现您想要实现的目标。这是一个很好的lib：lib-gwt-file.jar

Answer 3

以Braj提供的链接为基础......以下是我的表现：

private String imageDataUrl;

static private native void observeFileSelection(MainActivity main, Element uploader, Element error) /*-{
    function handleFileSelect(selevt) {
        error.innerHTML = "";

        var file = selevt.target.files[0];
        if (file.size > 1 * 1024 * 1024) {
            error.innerHTML = "Error: Image must be less that 1MiB in size.";
            return;
        }

        var reader = new FileReader();
        reader.onload = function (loadevt) {
            main.@com.example.app.MainActivity::setSelectedImageDataUrl(Ljava/lang/String;)(loadevt.target.result);
        }
        reader.readAsDataURL(file);
    }

    uploader.addEventListener("change", handleFileSelect, false);
}-*/;

public void setSelectedImageDataUrl(String dataurl) {
    imageDataUrl = dataurl;
}

private void handleOverlayButton() {
    final DialogBox dialog = new DialogBox();

    final HTMLPanel htmlpanel = new HTMLPanel(
            S.mainOverlayChooseText() + "<hr><div id='fileupload'></div><div id='fileerror' style='color:red'></div><hr>");
    dialog.setHTML("<b>" + S.mainOverlayChooseTitle() + "</b>");
    dialog.add(htmlpanel);
    dialog.setAnimationEnabled(true);
    dialog.setGlassEnabled(true);
    dialog.addStyleName("info-dialog");

    final FileUpload file = new FileUpload();
    file.setName("imgfile");
    htmlpanel.add(file, "fileupload");
    final SimplePanel error = new SimplePanel();
    htmlpanel.add(error, "fileerror");

    final Button ok = new Button(S.buttonOk());
    ok.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            dialog.hide();
            dialog.clear();
            setOverlayImage(imageDataUrl);
            imageDataUrl = null;
        }
    });
    htmlpanel.add(ok);

    final Button cancel = new Button(S.buttonCancel());
    cancel.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            dialog.hide();
            dialog.clear();
            imageDataUrl = null;
        }
    });
    htmlpanel.add(cancel);

    dialog.center();
    dialog.show();
    observeFileSelection(this, file.getElement(), error.getElement());
}

private void setOverlayImage(String dataurl) {
    // just for testing
    final AbsolutePanel overlay = new AbsolutePanel();
    final Image image = new Image(dataurl);
    overlay.add(image);
    RootPanel.get().add(overlay);
}

希望如果其他人也试图这样做会有所帮助。

GWT / Javascript：获取用户选择的本地文件的URL

3 个答案: