如何上传与jQuery客户端的图像，并将其添加到一个div？ [英] How to upload an image with jQuery client side and add it to a div?

问题描述

所以基本上，正如标题所说，我想有一个上传按钮，允许客户端上传的图像，然后它会显示在一个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.

当然，这也只是客户端，因此，如果网页被刷新过那么图像将消失。

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.

很新的jQuery的，虽然我可以code流利的Javascript。

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

也不会知道这是可能的，或者没有AJAX和/或PHP的帮助。想尽可能地避免这些。

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.

所有帮助是极大的AP preciated。

All help is greatly appreciated.

推荐答案

下面是一个工作的jsfiddle 你在找什么

Here is a working JSFiddle for what you are looking for

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只有：

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

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叉 这里，以帮助解释如何让更多的使用jQuery的回答一些您的评论的问题。

---

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

这篇关于如何上传与jQuery客户端的图像，并将其添加到一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！