Блог

Главная - Вопросы по программированию - Функция отображения изображения на JavaScript: функция упрощения справки

Функция отображения изображения на JavaScript: функция упрощения справки

#javascript #html #arrays #image #button

#javascript #HTML #массивы #изображение #кнопка

Вопрос:

Я основываю это на проекте, который у меня был в прошлом семестре в школе. По сути, он сделал то, что я хотел, но он сделал это для массива. Для того, что я делаю прямо сейчас, мне просто нужно одно изображение, а не массив, чтобы я мог избавиться от циклов for и тому подобного. 

 <!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
    myImages = new Array();
    var myFiles = document.getElementById("files");

    for (var i=0; i < myFiles.files.length; i  )
    {
        myImages[i] = myFiles.files[i].name;
    }

    var theImages = document.getElementById("images");
    theImages.innerHTML = ""; // Clearout the image area.

    for (var i=0; i < myFiles.files.length; i  )
    {
    "<img id='pic"   i   i   ";'"   " src='"   myImages[i]  
    "'"   " width = '400' "   " /> ";
}
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files[]" accept="image/*" onchange="loadImage();" multiple />
</div>
<div id="images" style="position:relative; ">
Images will go here...
</div>
</body>
</html>

Вот где я нахожусь до сих пор:

 <!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
        var myFiles = document.getElementById("files");

        document.getElementById("images").innerHTML = "<img src='"   myFiles.files.src  "'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>

Пока что, когда я нажимаю кнопку, я могу найти свой файл, но все, что я получаю в браузере, — это значок сломанного изображения.

Комментарии:

1. MyFiles. файлы [0].src, если вы действительно хотите, сделайте это таким образом…

2. используйте литерал массива [] вместо new Array(), это быстрее и чище.

3. @Gio первый фрагмент по сути делает именно то, что я хочу, если я выбираю только один файл. Я просматриваю, выбираю его, и браузер отображает его. Я пытаюсь изучить самый простой способ загрузки только одного файла. Надеюсь, без массивов или циклов.

4. @raptus Я бы хотел вообще отказаться от использования массива. Как вы думаете, есть ли способ исправить этот второй фрагмент кода? Я чувствую, что это довольно близко (это исходит от полного новичка).

5. @user3687308 итак, по сути, вы просто хотите, чтобы код загружал одно изображение, это довольно просто, однако удаление массива сделало бы ваш код немодульным, другими словами, если кто-то еще захочет использовать ваш код, его нельзя будет использовать, поскольку ваш код создан только для вашей индивидуальной ситуации.

Ответ №1:

 <html>
<head>
<script>
function loadImage()
{
    var myFiles = document.getElementById("files");

    document.getElementById("images").innerHTML = "<img src='"   myFiles.files[0].name  "'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>

Я отвечаю на свой собственный вопрос, потому что на него были даны ответы только с комментариями, и я не смог выбрать их в качестве ответов. Спасибо Raptus и Gio за помощь в этом.