как предварительно загрузить и отобразить изображение на стороне клиента?

Question

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

У меня есть профиль пользователя. Таким образом, пользователь может загрузить аватар. Он использует общую кнопку «Обзор ...», но этот будет информировать сервер о следующем отправке.

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

<img src="" id="image_to_display" class="img-responsive" alt=""/> 
<form enctype="multipart/form-data" method="post" accept-charset="utf-8" role="form" action="/pros/sites/add"> 
    <input class="form-control" value="POST" type="hidden" name="_method" id="_method" /> 
     <fieldset> 
      <div class="form-group file"> 
       <input type="file" name="logofile" onchange="loadImg('logofile');" id="logofile"> 
      </div> 

     ..... 
     </fieldset>        
     ..... 
</form> 

От document.getElementById ("logofile"), я могу получить только имя изображения, а не имя пути.

Как это сделать?

Answer 1

От document.getElementById («logofile»), я могу получить только имя изображения, а не путь к файлу.

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

Вы преувеличиваете проблему.

Вам не нужно искать изображение в системе пользователя для его отображения.

Упростите вашу проблему и сделайте что-то похожее на то, что другие показали здесь в stackoverflow.

Решение:

Ответ: https://stackoverflow.com/a/27165977/1026898 делает именно то, что вы хотите.

1. Вы будете принимать файл в той же форме, как и сейчас.
2. Затем вы используете javascript для обнаружения, когда форма была обновлена ​​с изображением пользователя.
3. Затем вы устанавливаете источник тега изображения (элемент изображения, который будет отображать «предварительный просмотр»), в вашем случае элемент с идентификатором image_to_display. Вы устанавливаете это с помощью element.src) на изображение, которое было выбрано в форме (это сам образ).

Использование кода:

<img src="" id="image_to_display" class="img-responsive" alt=""/> 
<form enctype="multipart/form-data" method="post" accept-charset="utf-8" role="form" action="/pros/sites/add"> 
    <input class="form-control" value="POST" name="_method" id="_method" /> 
     <fieldset> 
      <div class="form-group file"> 
       <input type="file" name="logofile" id="logofile" onchange="loadFile(event)"> 
      </div> 

     ..... 
     </fieldset>        
     ..... 
</form> 
<script> 
    var loadFile = function(event) { 
    var output = document.getElementById('image_to_display'); 
    output.src = URL.createObjectURL(event.target.files[0]); 
    }; 
</script> 

Answer 2

Вы не сможете получить имя пути, потому что это проблема конфиденциальности для одной вещи, и вы не сможете присвоить ее <img src в любом случае из-за правил перекрестного происхождения. Вы должны смотреть в использовании FileReader хотя и требует относительно современных браузеров (Chrome, Firefox, IE 10 ...)