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

Я хотел бы показать изображение и его размеры на клиенте, прежде чем загружать его на сервер. Всякий раз, когда я пытаюсь создать Image виджет gwt ext, он не принимает локальный файл (в файловой системе). Он принимает только http-запросы. Я также пробовал String img = GWT.getHostPageBaseURL() + "image_name" и функцию замены, но с тем же результатом. Наконец я перешел на ImagePreloader, но ему тоже нужен URL.

ImagePreloader.load("URL of image", new ImageLoadHandler()
{
    public void imageLoaded(ImageLoadEvent event) 
    {
        if (event.isLoadFailed())
            Window.alert("Image " + event.getImageUrl() + "failed to load.");
        else
            Window.alert("Image dimensions: " + event.getDimensions().getWidth() + " x " + event.getDimensions().getHeight());
    }
});

Может ли кто-нибудь предложить решение, которое не включает сначала загрузку изображения?


person Community    schedule 04.04.2014    source источник


Ответы (2)


Пожалуйста, взгляните на пример кода JS ниже:

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}

 $("#imgInp").change(function(){
   readURL(this);
});

и связанный HTML:

 <form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>
person nitin verma    schedule 23.02.2016
comment
-1 Вы только что скопировали другой SO-ответ, который вам не принадлежит, и разместили его здесь. И вы даже не включили jsfiddle, который показывает, что он работает. - person Baz; 23.02.2016

Посмотрите на этот связанный вопрос и ответ:

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

Вы можете включить его с помощью JSNI. Теперь я знаю о решении в рамках GWT.


Только что нашел gwtupload, который утверждает, что может предварительно просматривать изображения перед их загрузкой.

person Baz    schedule 04.04.2014
comment
Спасибо за ответ, я использовал gwtupload, но его сервлет создает локальную структуру каталогов, а не отправляет URL-адрес клиенту, который работает после загрузки файла ... - person ; 07.04.2014
comment
я новичок в jsni. как его использовать, я не знаю, я использовал его на простом java-скрипте и html, но он не работает. пожалуйста помоги ... - person ; 07.04.2014
comment
да, я вижу это, но в следующем html-коде, как вызывается функция и как я могу вызвать эту функцию, используя загрузку файла GWt Ext ‹form id=form1 runat=server› ‹input type='file' id=imgInp /› ‹img id =blah src=# alt=ваше изображение /› ‹/form› - person ; 08.04.2014