JQuery: как динамически показывать изображение, используя "значение" поля <input type="file">

Мне было интересно, есть ли способ динамически отображать изображение, которое пользователь просто загрузил в поле input type="file".

Например, до сих пор у меня есть следующий код:

image_upload.html

<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
    <input id ="id_iamge" type="file" name="image" />
    <input type="submit" value="Upload" />
</form>

<div id="image_view">
    <img id="uploaded_image">
</div>

upload.js

$(document).ready(function() {
    $("#id_image").change(file_select);
});

function file_select(event) {
    $("#uploaded_image").attr("src", $("#id_image").val());
}

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

Конечно, я знаю, что могу легко просмотреть изображение, если пользователь уже ОТПРАВЛЯЛ форму и когда изображение уже находится на моем сервере базы данных.

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

Чтобы сделать это, я думаю, мне нужно узнать PATH изображения на собственном компьютере Uploader, а затем установить этот "локальный путь" как "src" изображения.

Есть ли способ получить этот ЛОКАЛЬНЫЙ ПУТЬ изображения, которое только что отправил пользователь?

(Мой код Javascript выше явно не работал, поскольку он просто устанавливает имя файла изображения, а не абсолютный путь, как "src". Например, когда я запускаю этот код и загружаю изображение, я получите это:

Результат:

<img id="uploaded_image" src="random_image.jpg" />

который ничего не показывает.

Ответ 1

Взгляните на этот образец, это должно работать: http://jsfiddle.net/LvsYc/

HTML:

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

JS:

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);
});

Ответ 2

Используйте этот код. Он будет работать:

<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
    function showimagepreview(input) 
    {
      if (input.files && input.files[0]) 
      {
        var filerdr = new FileReader();
        filerdr.onload = function(e) {
            $('#imgDisplayarea').attr('src', e.target.result);
        };
        filerdr.readAsDataURL(input.files[0]);
      }
    }
</script>

<!-- HTML -->
<form>
    <div>
        <input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
    </div>
    <img id="imgDisplayarea"/>
</form>