Загрузить изображение из файла Javascript

-1

Так у меня есть код Javascript, что я включил в моем HTML файл:Загрузить изображение из файла Javascript

<script> 
var checkbox = document.getElementById('checkbox'); 
var checkbox_1 = document.getElementById('checkbox_1'); 
var checkbox_2 = document.getElementById('checkbox_2'); 

var img_1 = "green.png"; 
var img_2 = "red.png"; 
var img_3 = "yellow.png"; 

checkbox.onclick = function() { 
    if (checkbox.src == img_1) { 
     checkbox.src = img_2; 
    } else if (checkbox.src == img_2) { 
     checkbox.src = img_3; 
    } else if (checkbox.src == img_3) { 
     checkbox.src = img_1; 
    } 
} 
checkbox_1.onclick = function() { 
    if (checkbox_1.src == img_1) { 
     checkbox_1.src = img_2; 
    } else if (checkbox_1.src == img_2) { 
     checkbox_1.src = img_3; 
    } else if (checkbox_1.src == img_3) { 
     checkbox_1.src = img_1; 
    } 
} 
checkbox_2.onclick = function() { 
    if (checkbox_2.src == img_1) { 
     checkbox_2.src = img_2; 
    } else if (checkbox_2.src == img_2) { 
     checkbox_2.src = img_3; 
    } else if (checkbox_2.src == img_3) { 
     checkbox_2.src = img_1; 
    } 
} 
</script>

То, что я хочу сделать, это загрузить изображения из файла, а не из URL. Из URL-адреса он работает нормально, но из файла это не так. Почему это и как я могу это исправить?

источник

2016-12-25 Coto TheArcher

Файл-система не может быть доступна через JavaScript в браузере. Но вы можете заставить пользователя выбрать файл через элемент 'input', если это соответствует вашим потребностям. – schroffl

Вы можете получить доступ к файлам, но пользователю необходимо инициировать этот доступ (по очевидным соображениям безопасности). Это хорошее место для запуска: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications – David

'input type =" checkbox "' элементы не имеют атрибута 'src'. Вероятно, вам нужно использовать атрибут 'value' attrubute. –

Это зависит от того, где находятся эти файлы изображений. Если эти изображения находятся в том же каталоге, что и файл HTML, оно должно работать или

var img_1 = "./green.png"; 
var img_2 = "./red.png"; 
var img_3 = "./yellow.png";

В противном случае, вы должны сказать, где они с их именами. Например, если ваша структура веб-каталог выглядит следующим образом,

.- index.html 
ㄴ img 
    ㄴ green.png 
    ㄴ red.png 
    ㄴ yellow.png

тогда ваши переменные изображения должны быть как

var img_1 = "/img/green.png"; 
var img_2 = "/img/red.png"; 
var img_3 = "/img/yellow.png";

источник

2016-12-25 13:55:23

На моей точки зрения, это может происходить потому, что вы не установили в HTML-атрибут src, если вы что сделать это в Javascript, вы должны сделать что-то добавить, как это (не забудьте поместить изображения в той же папке, что и HTML):

checkbox.src = img_1; 
checkbox_1.src = img_2; 
checkbox_2.src = img_3;

Bu t, если у вас возникают проблемы с изменением уже существующего изображения, потому что, когда вы даете объекту атрибут src, он принимает весь путь, например «. \ img.png» => «C: \ Users \ User \ documents \ website \ img .png». Так попробовать что-то вроде этого:

if (checkbox.src.split("/")[checkbox.src.split("/").length - 1]) {

Или, если вы хотите что-то более чистый:

var array_path = checkbox.src.split("/"); 
if(array_path[array_path.length - 1]){

источник

2016-12-25 14:17:47 Safirah

Загрузить изображение из файла Javascript

ответ

Смежные вопросы