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

Question

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

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

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

Answer 1

Так как это был первый результат для 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>

Answer 2

Это возможно при использовании HTML5 File API .