Как сделать окно для картинки?

@thefo · Регистрация: 21.08.2015

Студворк — интернет-сервис помощи студентам

Как сделать окно для картинки как вконтакте. Т.е. юзер сам сможет загружать туда картинку. Помогите пожалуйста. Буду вам очень благодарен.

@alexsamos33 · 04.10.2015, 07:49

Сообщение от thefo

юзер сам сможет загружать туда картинку?

HTML5
1
2
3
4
5
<form action="uploader.php" method="POST" enctype="multipart/form-data">
    <label for="file1">Ваш файл:</label>
    <input type="file" name="file1" id="file1">
    <div align="center"><input type="submit" name="start1" id="start1" value="Отправить"></div>
</form>

@thefo · 04.10.2015, 13:02 **[ТС]**

Знак вопроса случайно поставил. Благодарю)

Добавлено через 2 часа 57 минут
А как сделать так чтобы картинку высвечивало?

@Padimanskas · 04.10.2015, 13:30

Сообщение от thefo

А как сделать так чтобы картинку высвечивало?

Подробно об этом
Заголовок "Example: Showing thumbnails of user-selected images"

@alexsamos33 · 04.10.2015, 13:30

Сообщение от thefo

А как сделать так чтобы картинку высвечивало?

Можно так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="uploader.php" method="POST" enctype="multipart/form-data">
    <label for="file1">Ваш файл:</label>
    <input type="file" name="file1" id="file1" accept="image/jpeg,image/png,image/gif,image/*">
    <div align="center"><input type="submit" name="start1" id="start1" value="Отправить"></div>
</form>
<script type="text/javascript">
window.onload=function(){
var fl=document.getElementById("file1");
fl.onchange=function(){
if (!FileReader) return false;
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
img = document.createElement("img");
img.src = dataUri;
document.body.appendChild(img);
};
reader.onerror = function(event) {
console.error("Файл не может быть прочитан! код " + event.target.error.code);
};
reader.readAsDataURL(fl.files[0]);
}
}
</script>

P.S. А вообще, картинку лучше загружать на сервер и уже там , на сервере, с ней что-то делать... Подробнее про загрузку на сервер через PHP.

@thefo · 04.10.2015, 13:52 **[ТС]**

Я имел ввиду как вконтакте. Т.е. есть небольшое окно для картинки, и когда ты нажимаешь выбрать файл, выбираешь там нужную тебе картинку и она у тебя вставляется именно в это окошечко. Но всё же спасибо тебе большое) Очень выручил

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

@thefo 2 / 2 / 3 Регистрация: 21.08.2015 Сообщений: 110

	Как сделать окно для картинки? 03.10.2015, 18:29. Показов 630. Ответов 5 Метки нет (Все метки) Как сделать окно для картинки как вконтакте. Т.е. юзер сам сможет загружать туда картинку. Помогите пожалуйста. Буду вам очень благодарен. 0

@thefo 2 / 2 / 3 Регистрация: 21.08.2015 Сообщений: 110
	04.10.2015, 13:02 [ТС]
	Знак вопроса случайно поставил. Благодарю) Добавлено через 2 часа 57 минут А как сделать так чтобы картинку высвечивало? 0

@thefo 2 / 2 / 3 Регистрация: 21.08.2015 Сообщений: 110
	04.10.2015, 13:52 [ТС]
	Я имел ввиду как вконтакте. Т.е. есть небольшое окно для картинки, и когда ты нажимаешь выбрать файл, выбираешь там нужную тебе картинку и она у тебя вставляется именно в это окошечко. Но всё же спасибо тебе большое) Очень выручил 0