Chokwadi, ngatitange nechinyorwa. Ini ndichatarisa pane izvo zvinotsanangurwa muchimiro:
Wakambozvibvunza here mashandisiro eJavaScript kuvhura faira rekuisa dialog nekudzvanya bhatani? Uyu mubvunzo wakajairika unouya kune vanogadzira, kunyanya kana uchigadzira mushandisi-ane hushamwari nzvimbo dzinoda kurodha mafaira. Muchikamu chino, tichaongorora mhinduro yakapusa kudambudziko iri, inosanganisira iyo HTML 'yekuisa' chinhu, imwe CSS, uye zvishoma zvemashiripiti eJavaScript.
Tinokutungamirira kuburikidza nekodhi, tsanangura kuti sei ichishanda, uye tonongedza zvinhu zvakakosha zvekuyeuka nezveramangwana rako rekuita coding.
Kubvisa Dambudziko
Kutanga, ngatinzwisise dambudziko zvakanyanya. Iyo 'input' mhando 'faira' muHTML inogadzira iri nyore faira rekuisa munda mubrowser. Dambudziko, zvisinei, nderekuti kutaridzika uye kushanda kweiyi ndima kunogona kusasangana neUX zvinodiwa zvekushandisa kwako.
[kirasi lang=โJavaScriptโ][/kirasi]
Mamwe mabhurawuza echikuru haatsigire kukwidzwa kwemafaira, uye mamwe anoita bhatani rekuti 'browser' riwedzere kupfuura munda wacho. Izvi zvinoita kuti zviome kugadzira. Saka chii chingaitwa? Ichi chinyorwa chinoshandisa mhinduro ine bhatani chairo kuzadzisa chinangwa ichi.
A JavaScript Solution
Mhinduro yedu inosanganisira kuvanza bhatani rekutanga 'browser' uye kugadzira idzva, iro kana radzvanywa, rinokonzeresa iyo yakavanzika faira yekuisa dialog.
Kuti tiite izvi, tinogona kushandisa 'tinya' chiitiko muJavaScript.
//HTML <ul> <li><input id="fileInput" type="file" style="display: none;" /></li> <li><button onclick="openInputFile()">Open Input File</button></li> </ul> //JavaScript function openInputFile(){ document.getElementById('fileInput').click(); }
Mushure mekusarudza faira, unogona kutora faira data neJavaScript nekuwana iyo 'mafaira' pfuma yefaira yekuisa:
let fileInput = document.getElementById('fileInput'); let file = fileInput.files[0];
Maraibhurari Kuti Awedzere Kushanda
Kana iwe uchida kuenda nhanho mberi uye kushanda nemafaira ekugadziridza maraibhurari, FileReader API inzvimbo yakanaka yekutanga. Neiyi API, unogona kuverenga zviri mukati mafaera (kana mbishi data buffers) akachengetwa pakombuta yemushandisi.
let reader = new FileReader(); reader.onload = function(e){ console.log(e.target.result); } reader.readAsText(file);
Mabasa Akafanana uye Kuwedzera Kuverenga
Kuti uwedzere kudzidza, unogona kudzidza File API uye FormData zvinhu. Faira API inopa ruzivo nezve mafaera uye inobvumira JavaScript muwebhu browser kuti iwane zvirimo uku FormData ichishandiswa kugadzira seti yekiyi / kukosha peya kutumira uchishandisa XMLHttpRequest.
Pakazere, semugadziri weJavaScript, kugona kugadzirisa mafaera mubrowser kunogona kuve hunyanzvi hunobatsira, huchikugonesa kuvaka mafomu anodyidzana, ane hushamwari mushandisi uye maapplication.