Показать сообщение отдельно
  #1 (permalink)  
Старый 25.11.2016, 22:24
Новичок на форуме
Отправить личное сообщение для Andrpre Посмотреть профиль Найти все сообщения от Andrpre
 
Регистрация: 25.11.2016
Сообщений: 3

Скрипт превью фото перед отправкой на сервер
Здравствуйте! Т.к. я полный чайник в 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>

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