Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>

Подскажите как сделать так, чтобы в то время как появляется превьюшка, убиралось кнопка выбора файла. Буду очень признателен)))
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2016, 01:49
Новичок на форуме
Отправить личное сообщение для Andrpre Посмотреть профиль Найти все сообщения от Andrpre
 
Регистрация: 25.11.2016
Сообщений: 3

еще кнопку добавить
Да, как раз хотел добавить, что нужно еще чтобы под картинкой где-нибудь была кнопка или ссылка "загрузить другую фотографию", которая возвращала бы все на свои места и удаляла фото из выбранных. Вот думаю кнопка reset подошла бы?
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2016, 02:57
Новичок на форуме
Отправить личное сообщение для Andrpre Посмотреть профиль Найти все сообщения от Andrpre
 
Регистрация: 25.11.2016
Сообщений: 3

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение значений input в форме перед ее отправкой через ajax rustleofstars jQuery 4 26.06.2012 17:40
Проверка типа файла перед отправкой mav1 Элементы интерфейса 18 27.05.2012 19:28
Ext.Direct какие преимущества перед передачей на сервер через JSON? JDev ExtJS 0 06.01.2012 15:41
Вызов урла перед отправкой данных формы на сервер brazerok Events/DOM/Window 3 31.05.2011 12:49
Верификация формы перед отправкой Катерина Общие вопросы Javascript 4 12.03.2010 15:03