Овај текст ће демонстрирати метод за отпремање слике помоћу ЈаваСцрипт-а и ХТМЛ-а.
Како да отпремите једноставну слику користећи ЈаваСцрипт/ХТМЛ?
Да бисмо отпремили једноставну слику помоћу ЈаваСцрипт-а, прво ћемо додати ознаку слике на ХТМЛ страницу, а затим ћемо користити ЈаваСцрипт код за учитавање и одабир слике на веб страници.
За практичне импликације, испробајте наведена упутства.
Пример
Пре свега, следите дата упутства:
- Уметните „ <инпут> ” елемент и наведите тип уноса као „ фајл ”.
- Овај тип „фајла“ одређује поље у избору датотеке и „ Прегледај ” дугме за отпремање датотека.
- “ <бр> ” ознака умеће прелом реда.
- Затим убаците „ <имг> ” ХТМЛ ознаку и додајте “ ид ” да бисте навели јединствени ИД са одређеним именом.
- “ срц ” атрибут који се користи за додавање УРЛ адресе медијске датотеке:
< бр >
< имг ид = 'моја слика' срц = '#' >
Може се приметити да је креирана опција датотеке и може да прикаже име слике само након што је прихвати унос:
Сада, унутар „ <сцрипт> “, користите следећи код:
< скрипта >
прозор. аддЕвентЛистенер ( 'учитавање' , функција ( ) {
документ. куериСелецтор ( 'инпут[типе='филе']' ) . аддЕвентЛистенер ( 'промена' , функција ( ) {
ако ( ово . фајлови && ово . фајлови [ 0 ] ) {
варимг = документ. гетЕлементБиИд ( 'имг_цонтент' ) ;
имг. на оптерећење = ( ) => {
УРЛ . ревокеОбјецтУРЛ ( имг. срц ) ;
}
имг. срц = УРЛ . цреатеОбјецтУРЛ ( ово . фајлови [ 0 ] ) ;
}
} ) ;
} ) ;
скрипта >
У горњем исечку кода:
- “ аддЕвентЛистенер() ” ЈаваСцрипт метода дозвољава уметање или прикључивање дефинисаног руковаоца догађаја елементу.
- “ куериСелецтор() ” је метод који се користи за враћање прве ставке у одређеном документу која се повезује са одређеним селектором.
- “ гетЕлементБиИд() ” се користи за добијање елемента коришћењем дефинисаног ИД-а. У ту сврху, вредност се прослеђује као параметар.
- “ ревокеОбјецтУРЛ() ” ослобађа УРЛ постојећег објекта креираног коришћењем УРЛ-а. Да бисте то урадили, УРЛ слике се прослеђује као параметар ове методе.
- “ цреатеОбјецтУРЛ() ” је ЈаваСцрипт статичка метода која чини да одређени стринг има УРЛ који представља објекат прослеђен у параметру.
Излаз
Може се приметити да смо успешно поставили једноставну слику.
Закључак
Да бисте отпремили једноставну слику користећи ЈаваСцрипт, користите „ аддЕвентЛистенер() ” метод који дозвољава уметање или прикључивање дефинисаног руковаоца догађаја елементу. Затим приступите дефинисаном елементу по ИД-у и користите „ ревокеОбјецтУРЛ() ' и ' цреатеОбјецтУРЛ() ” методе. Овај пост је навео једноставан метод за отпремање слика користећи ЈаваСцрипт/ХТМЛ.