Question

我有一个问题从本机脚本调用java。我将名为imagesPanel的实例作为参数传递，知道该实例实现了ImageHolder。调用调用之前的Window.alert（）但调用永远不会发生。

有什么我忘了做的吗？

/**
 * Used this link as a model: http://blog.revathskumar.com/2012/04/html5-show-thumbnail-preview-of-image.html
 * 
 * http://www.gwtapps.com/doc/html/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.JavaFromJavaScript.html
 * 
 * FIXME check file size too and eventually add a forbidden icon:  http://www.sanwebe.com/2013/10/check-input-file-size-before-submit-file-api-jquery
 * @param fileUpload
 * @param imagesPanel
 * @return
 */
protected native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.children[0].children[0].addEventListener("change",
            fileUpload.addEventListener("change", function(e) {
                showThumbnail(fileUpload.children[0].children[0].files,
                        imagesPanel);
            }, false));

    $entry(function showThumbnail(files, imagesPanel) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;
                    $wnd.alert('check =' + img);
                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    })
}-*/;

@Override
public void addImage(Element image) {
    System.out.println( "adding "+ image);
    panel.getElement().appendChild(image);
}

这是界面代码

import com.google.gwt.dom.client.Element;

public interface ImageHolder {

    void addImage(Element image);
}

Answer 1

在做了一些改动之后，它对我来说很好。

删除所有children[0].children[0]
删除$entry()

完整代码：

public static native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.addEventListener("change", fileUpload.addEventListener(
            "change", function(e) {
                showThumbnail(fileUpload.files, imagesPanel);
            }, false));

    function showThumbnail(files, imagesPanel) {

        for ( var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;

                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    }
}-*/;

缺少原始帖子中的部分代码。请验证。

public class ImageHolder implements UploadItemWidget {

    public SimplePanel panel = new SimplePanel();

    public FileUpload fileUpload = new FileUpload();

    public ImageHolder() {
        panel.add(fileUpload);
    }
    ...
}

入口点类

public void onModuleLoad() {

    ImageHolder imageHolder = new ImageHolder();
    RootPanel.get().add(imageHolder.panel);

    ImageHolder.initiateFilesInput(imageHolder.fileUpload.getElement(), imageHolder);
}

屏幕截图:(选择了3张图片）

enter image description here

native GWT：从本机js调用java方法

1 个答案: