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

So basically, as the title says, I want to have an upload button that allows a client to upload an image and it will then be displayed in a div.

基本上，正如标题所说，我想要一个上传按钮，允许客户端上传图片，然后它会显示在一个div中。

Of course, this would just be client side, so if the page was ever refreshed then the image would disappear.

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

The image would then be styled accordingly and given fixed widths and heights.

然后，图像将被相应地设计，并给出固定的宽度和高度。

I searched online and couldn't find anything at all.

我在网上搜索，找不到任何东西。

Very new to jQuery, although I can code fluently in Javascript.

对jQuery来说，这是一个全新的概念，尽管我可以用Javascript流畅地编写代码。

Also not to sure if this is possible or not without the help of AJAX and/or PHP. Would like to avoid these if possible.

另外，如果没有AJAX和/或PHP的帮助，也不能确定这是否可行。如果可能的话，我想避免这些。

All help is greatly appreciated.

非常感谢大家的帮助。

2 个解决方案

#1

Here is a working JSFiddle for what you are looking for

这是一个正在工作的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);

As a side note, the above solution uses jQuery although it is not required for a working solution, Javascript only :

作为补充说明，上面的解决方案使用jQuery，虽然只使用Javascript解决方案并不需要jQuery:

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" />

See the jsFiddle Fork made here to help explain how to make more use of jQuery to answer some of your comment questions.

请参阅这里制作的jsFiddle，以帮助解释如何更多地使用jQuery来回答您的一些评论问题。

#2

Refer this http://www.codeforest.net/html5-image-upload-resize-and-crop

请参考这个http://www.codeforest.net/html5-image-upload-resize-and-crop

you can use HTML5 tags like canvas for the same...and you can also use some Jquery plugins like jCrop for the same..

你也可以使用HTML5标签，比如canvas。你也可以使用一些Jquery插件，比如j农作物。

#1