如何使用jQuery客户端上传图像并将其添加到div？

Question

所以基本上,正如标题所说,我希望有一个上传按钮,允许客户端上传图像,然后它将显示在div中.

当然,这只是客户端,所以如果页面被刷新,那么图像就会消失.

然后相应地对图像进行样式化并给出固定的宽度和高度.

我在网上搜索,根本找不到任何东西.

jQuery很新,虽然我可以在Javascript中流利地编码.

如果没有AJAX和/或PHP的帮助,也不确定这是否可行.如果可能的话,想避免这些.

非常感谢所有帮助.

Answer 1

这是一个有用的JSFiddle,可以满足您的需求

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);
    }
}

$("#imgInp").change(readURL);

作为旁注,上面的解决方案使用jQuery,虽然它不是工作解决方案所必需的,仅限Javascript:

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

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

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

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

请参阅此处制作的jsFiddle Fork,以帮助解释如何更多地使用jQuery来回答您的一些评论问题.