Мне было интересно, есть ли способ динамически отображать изображение, которое пользователь просто загрузил в поле 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" />
который ничего не показывает.