Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт превью фото перед отправкой на сервер (https://javascript.ru/forum/dom-window/66115-skript-prevyu-foto-pered-otpravkojj-na-server.html)

Andrpre 25.11.2016 22:24

Скрипт превью фото перед отправкой на сервер
 
Здравствуйте! Т.к. я полный чайник в js прошу Вашей помощи) У меня имеется код, который показывает превьюшку выбранной фотки перед загрузкой на сервер.
<form enctype="multipart/form-data" method="post" action="uploads.php">
	<p><input type="file" id="input-upload-foto" name="files" required/</p>
	<p><output id="output"></output></p>
	<p><input type="submit" value="Отправить на обработку" name="upload"/></p>
</form>

Собственно сам скрипт:
<script type="text/javascript">
  function handleFileSelectSingle(evt) {
    var file = evt.target.files; // FileList object

    var f = file[0]

      // Only process image files.
      if (!f.type.match('image.*')) {
        alert("Только изображения....");
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<div style="font-size: 18px;color: #318c90;padding: 10px;border-bottom: 3px #5ab7b7 solid;">Ваше фото:</div><img class="img-thumbnail" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('output').innerHTML = "";
          document.getElementById('output').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  

  document.getElementById('input-upload-foto').addEventListener('change', handleFileSelectSingle, false);
  
</script>

Подскажите как сделать так, чтобы в то время как появляется превьюшка, убиралось кнопка выбора файла. Буду очень признателен)))

Andrpre 26.11.2016 01:49

еще кнопку добавить
 
Да, как раз хотел добавить, что нужно еще чтобы под картинкой где-нибудь была кнопка или ссылка "загрузить другую фотографию", которая возвращала бы все на свои места и удаляла фото из выбранных. Вот думаю кнопка reset подошла бы?

Andrpre 26.11.2016 02:57

Сам уже решил)
просто добавил
document.getElementById('id кнопки').style.display = 'none';


Часовой пояс GMT +3, время: 14:28.