Показать превью выбранной картинки
Показать превью выбранной картинки можно через объект FileReader
, который появился в HTML 5.
<input type="file" id="uploadImage"> <img id="result"> <script> FReader = new FileReader(); // событие, когда файл загрузится FReader.onload = function(e) { document.querySelector("#result").src = e.target.result; }; // выполнение функции при выборки файла document.querySelector("input").addEventListener("change", loadImageFile); // функция выборки файла function loadImageFile() { var file = document.querySelector("input").files[0]; FReader.readAsDataURL(file); } </script>
Данный способ позволяет вывести превью выбранной картинки, не загружая её на сервер.
Пример кода: jsfiddle.net/tbhdN/