Вывести загруженное изображение через JavaScript

@Mishuuutka · Регистрация: 18.12.2017

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

Нужно вывести загруженное изображение в HTML коде, через JavaScript. Загрузка файла через input.
Загрузка файла в 93 строке, вывод в 50.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>Главная Страница</title>
    [JS]<script>
        function check(form) {
            if ((form.Name.value != "") && (form.work.value != "") && (form.Desc.value != "") && (form.confirm.checked) && (form.cod.value == "0096")) {
                document.getElementById("result_1").innerHTML = "<p> Название: " + form.Name.value + "</p>";
                if (form.category[0].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Жесткий диск</p>";
                if (form.category[1].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Видеокарта</p>";
                if (form.category[2].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Материнская плата</p>";
                switch (form.made.value) {
                    case "1":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: AMD </p>";
                        break;
                    case "2":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Intel </p>";
                        break;
                    case "3":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: ASUS </p>";
                        break;
                    case "4":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: MSI </p>";
                        break;
                    case "5":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Siagate </p>";
                        break;
                    case "6":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Hitachi </p>";
                        break;
                    case "7":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Toshiba </p>";
                        break;
                    case "8":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Gigabyte </p>";
                        break;
                }
                document.getElementById("result_4").innerHTML = "Ваш объект работает с:";
                for (var i = 0; i < form.work.options.length; i++) {
                    if (form.work.options[i].selected == true) {
                        document.getElementById("result_4").innerHTML = document.getElementById("result_4").innerHTML + form.work.options[i].value + "  ";
                    }
                }
                document.getElementById("result_5").innerHTML = "<p> Описание объекта: <br>" + form.Desc.value + "</p>";
                [COLOR="Red"]document.getElementById("result_6").innerHTML = "<p> Ваша фотография: <br> <img src='" + form.photo.value + "' width='100' height='100' ></p>";[/COLOR]
            } else if (form.Name.value == "")
                alert("Введите название объекта!")
            else if (form.made.value == 0)
                alert("Выберите марку объекта")
            else if (form.work.value == "")
                alert("Выберите с чем работает объект!")
            else if (form.Desc.value == "")
                alert("Введите описание объекта!")
            else if (!form.confirm.checked)
                alert("Нужно согласиться с правилами сайта!")
            else if (form.cod.value != "0096")
                alert("Неправильно введена капча!")
        }
    </script>[/JS]
</head>
 
<body>
    <form name="create" method="GET" action="newObj.html">
        Название объекта: <br>
        <input name="Name" type="text" size="20" maxlength="40"> <br> Категория: <br>
        <input type="radio" name="category" value="HDD" checked> Жесткий диск <br>
        <input type="radio" name="category" value="VIDEOCARD"> Видеокарта <br>
        <input type="radio" name="category" value="MATHERBOARD"> Материнская плата <br> Марка: <br>
        <select name="made">
            <option value="0"> Выберите марку </option>
            <option value="1"> AMD </option>
            <option value="2"> Intel </option>
            <option value="3"> ASUS </option> 
            <option value="4"> MSI </option>
            <option value="5"> Seagate </option>
            <option value="6"> Hitachi </option>
            <option value="7"> Toshiba </option>
            <option value="8"> Gigabyte </option>
        </select> <br> Работает с:<br>
        <select name="work" multiple>
            <option value="Графикой"> Графикой </option>
            <option value="Данными"> Данными </option>
            <option value="Вычислениями"> Вычислениями </option>
            <option value="Физикой"> Физикой </option>
            <option value="Другое"> Другое </option>
        </select> <br> Описание объекта: <br>
        <textarea name="Desc" rows="10" cols="50" maxlength="300"></textarea><br> Фотография: <br>
       [COLOR="Red"] <input name="photo" type="file" multiple accept="image/*">[/COLOR] <br><br> Я согласен с правилами сайта:
        <input type="checkbox" name="confirm"> <br><br> Введите код с картинки:
        <input name="cod" type="password" size="10" maxlength="4">
        <img src="capcha.png" width="100" height="50"> <br>
        <input type="button" value="Добавить" onclick="check(this.form)">
    </form>
    <div id="result_1"></div>
    <div id="result_2"></div>
    <div id="result_3"></div>
    <div id="result_4"></div>
    <div id="result_5"></div>
    <div id="result_6"></div>
</body>
 
 
</html>

Добавлено через 1 час 25 минут
Ответ найден, в google chrome это работать не будет, т.к гугл скрывает путь к выбранному изображению, а так как мы работает через локальный сервер это работать не будет)

Qwerty_Wasd · 12.05.2018, 17:20

Mishuuutka,

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

google chrome это работать не будет, т.к гугл скрывает путь к выбранному изображению, а так как мы работает через локальный сервер это работать не будет)

шта?
Открываем песочницу в Chrome => песочница

HTML5
1
2
3
<img id="image_preview" src="" height="350" width="350" alt=""/>
<input class="test" type="file" accept="image/*" onchange="AddImg();"/>
<button class="btn btn-secondary delete-link remove" type="button" onclick="DeleteImg();">Удалить</button>

JavaScript
1
2
function AddImg(){image_preview.src = URL.createObjectURL(event.target.files[0])}
function DeleteImg(){document.querySelector('.test').value = ''; image_preview.src = ""; URL.revokeObjectURL(image_preview.src)}

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .