Ipapakita ng write-up na ito ang paraan para sa pag-upload ng larawan gamit ang JavaScript at HTML.
Paano Mag-upload ng Simpleng Larawan Gamit ang JavaScript/HTML?
Upang mag-upload ng isang simpleng larawan gamit ang JavaScript, una, magdaragdag kami ng tag ng larawan sa HTML na pahina at pagkatapos ay gagamitin ang JavaScript code upang i-load at piliin ang larawan sa web page.
Para sa mga praktikal na implikasyon, subukan ang nakasaad na mga tagubilin.
Halimbawa
Una sa lahat, sundin ang ibinigay na mga tagubilin:
- Ipasok ang ' ” elemento at tukuyin ang uri ng input bilang “ file ”.
- Tinutukoy ng uri ng 'file' na ito ang field sa file-select at isang ' Mag-browse ” button para sa pag-upload ng mga file.
- “
” naglalagay ng line break ang tag. - Pagkatapos, maglagay ng ' ” HTML tag at idagdag ang “ id ” attribute upang tukuyin ang natatanging id na may partikular na pangalan.
- “ src ” attribute na ginamit upang idagdag ang URL ng media file:
< br >
< img id = 'myImage' src = '#' >
Maaaring mapansin na ang isang pagpipilian sa file ay nilikha, at maaari lamang itong ipakita ang pangalan ng imahe pagkatapos tanggapin ito ng isang input:
Ngayon, sa loob ng ' ” tag, gamitin ang sumusunod na code:
< iskrip >
bintana. addEventListener ( 'load' , function ( ) {
dokumento. querySelector ( 'input[type='file']' ) . addEventListener ( 'pagbabago' , function ( ) {
kung ( ito . mga file && ito . mga file [ 0 ] ) {
varimg = dokumento. getElementById ( 'img_content' ) ;
img. onload = ( ) => {
URL . bawiinObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( ito . mga file [ 0 ] ) ;
}
} ) ;
} ) ;
iskrip >
Sa snippet ng code sa itaas:
- “ addEventListener() ” Pinapahintulutan ng pamamaraan ng JavaScript ang pagpasok o pag-attach ng tinukoy na handler ng kaganapan sa isang elemento.
- “ querySelector() ” ay isang paraan na ginagamit upang ibalik ang unang item sa partikular na dokumento na nag-uugnay sa partikular na tagapili.
- “ getElementById() 'Ang pamamaraan ay ginagamit para sa pagkuha ng elemento sa pamamagitan ng paggamit ng tinukoy na id. Para sa layuning iyon, ang halaga ng ay ipinasa bilang parameter.
- “ revokeObjectURL() ” ay naglalabas ng isang umiiral nang object URL na ginawa sa pamamagitan ng paggamit ng URL. Upang gawin ito, ipinapasa ang URL ng larawan bilang parameter ng pamamaraang ito.
- “ createObjectURL() ” ay isang JavaScript static na paraan na ginagawang ang isang partikular na string ay may URL na kumakatawan sa bagay na ipinasa sa parameter.
Output
Mapapansing matagumpay nating na-upload ang isang simpleng larawan.
Konklusyon
Upang i-upload ang simpleng larawan gamit ang JavaScript, gamitin ang “ addEventListener() ” paraan na nagpapahintulot sa pagpasok o pag-attach ng isang tinukoy na handler ng kaganapan sa isang elemento. Pagkatapos, i-access ang tinukoy na elemento sa pamamagitan ng id at gamitin ang ' revokeObjectURL() 'at' createObjectURL() ' paraan. Nakasaad sa post na ito ang simpleng paraan ng pag-upload ng imahe gamit ang JavaScript/HTML.