Как показать предварительный просмотр изображения в браузере без загрузки файла изображения на сервер?

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

Есть ли какой-либо способ в HTML5, чтобы загрузчик файлов мог показывать изображение на стороне клиента перед отправкой фактической формы?

Я хочу разрешить пользователю просматривать файл изображения без загрузки файла на сервер (так что не загружайте его в каталог temp), но каким-то образом просто покажите изображение на стороне клиента в браузере клиента.

Ответ 1

Это возможно с помощью API файлов HTML5.

Ответ 2

Так как это был первый результат для google("html5 image preview"), я подумал, что я получаю удовлетворительный ответ. Надеюсь, это будет полезно.

<img id="preview" src="placeholder.png" height="100px" width="100px" />
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
<script type="text/javascript">      
  function previewImage(input) {
    var preview = document.getElementById('preview');
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        preview.setAttribute('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    } else {
      preview.setAttribute('src', 'placeholder.png');
    }
  }
</script>