在上传到服务器之前在客户端上显示图像

问题描述

我想在将客户端上传到服务器之前在客户端上显示图片及其尺寸。每当我尝试创建gwt ext的 Image 小部件时，它都不接受本地文件（在文件系统上）。它只接受http请求。我也尝试了 String img = GWT.getHostPageBaseURL（）+image_name和替换函数，但结果相同。最后我转移到 ImagePreloader ，但它也需要一个URL。

I would like to show an image and its dimensions on the client before uploading it to the server. Whenever I try to create an Image widget of gwt ext, it doesn't accept a local file (on the file system). It only accepts http requests. I also tried String img = GWT.getHostPageBaseURL() + "image_name" and the replace function but with same result. Finally I moved to ImagePreloader but its also needs a 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());
    }
});

有人可以提出一个解决方案，不包括首先上传图片吗？

Can someone suggest a solution that doesn't include uploading the image first?

推荐答案

请看下面的示例JS代码：

Please take a look at the sample JS code below:

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：

and the associated HTML:

 <form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

这篇关于在上传到服务器之前在客户端上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！