Скрипт превью фото перед отправкой на сервер
Здравствуйте! Т.к. я полный чайник в 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> Подскажите как сделать так, чтобы в то время как появляется превьюшка, убиралось кнопка выбора файла. Буду очень признателен))) |
еще кнопку добавить
Да, как раз хотел добавить, что нужно еще чтобы под картинкой где-нибудь была кнопка или ссылка "загрузить другую фотографию", которая возвращала бы все на свои места и удаляла фото из выбранных. Вот думаю кнопка reset подошла бы?
|
Сам уже решил)
просто добавил document.getElementById('id кнопки').style.display = 'none'; |
Часовой пояс GMT +3, время: 14:28. |