Как загрузить изображение с клиентской стороны jQuery и добавить его в div?

Итак, как говорится в заголовке, я хочу иметь кнопку загрузки, которая позволяет клиенту загружать изображение, и оно будет отображаться в div.

Конечно, это будет только клиентская сторона, поэтому, если страница была обновлена, изображение исчезнет.

Затем изображение будет оформлено соответствующим образом и задано фиксированная ширина и высота.

Я искал в Интернете и ничего не нашел.

Очень новый для jQuery, хотя я могу свободно программировать в Javascript.

Также не уверен, что это возможно или нет без помощи AJAX и/или PHP. Хотелось бы избежать этого, если это возможно.

Приветствуется вся помощь.

Ответ 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 для ответа на некоторые ваши комментарии.

Ответ 2

Обратитесь к http://www.codeforest.net/html5-image-upload-resize-and-crop

вы можете использовать теги HTML5, такие как холст для одного и того же... и вы также можете использовать некоторые Jquery-плагины, такие как jCrop для того же самого.