હલ: બટન ઓપન ફાઇલ ઇનપુટ

મુખ્ય પૃષ્ઠ » જાવાસ્ક્રિપ્ટ » કોણીય » હલ: બટન ઓપન ફાઇલ ઇનપુટ

ચોક્કસ, ચાલો લેખથી શરૂઆત કરીએ. હું બંધારણમાં નિર્ધારિત મુદ્દાઓ પર ધ્યાન કેન્દ્રિત કરીશ:

શું તમે ક્યારેય વિચાર્યું છે કે બટન પર ક્લિક કરીને ફાઇલ ઇનપુટ ડાયલોગ ખોલવા માટે JavaScript નો ઉપયોગ કેવી રીતે કરવો? આ એક સામાન્ય પ્રશ્ન છે જે વિકાસકર્તાઓ માટે આવે છે, ખાસ કરીને જ્યારે વપરાશકર્તા-મૈત્રીપૂર્ણ ઇન્ટરફેસ બનાવતી વખતે કે જેને ફાઇલ અપલોડની જરૂર હોય. આ લેખમાં, અમે આ સમસ્યાના સરળ ઉકેલની તપાસ કરીશું, જેમાં HTML 'ઇનપુટ' તત્વ, કેટલાક CSS અને થોડો જાવાસ્ક્રિપ્ટ જાદુનો સમાવેશ થાય છે.

અમે તમને કોડ દ્વારા માર્ગદર્શન આપીશું, તે શા માટે કામ કરે છે તે સમજાવીશું, અને તમારા ભાવિ કોડિંગ પ્રયાસો માટે યાદ રાખવા માટેના મહત્વપૂર્ણ પાસાઓ દર્શાવીશું.

સમસ્યાને બહાર કાઢવી

પ્રથમ, ચાલો સમસ્યાને વધુ સારી રીતે સમજીએ. HTML માં 'ઇનપુટ' પ્રકાર 'ફાઇલ' બ્રાઉઝરમાં એક સરળ ફાઇલ ઇનપુટ ફીલ્ડ બનાવે છે. જો કે, સમસ્યા એ છે કે આ ક્ષેત્રનો દેખાવ અને કાર્યક્ષમતા હંમેશા તમારી એપ્લિકેશનની UX જરૂરિયાતોને પૂરી કરી શકતી નથી.

[ક્લાસ lang="JavaScript"][/class]

કેટલાક જૂના બ્રાઉઝર્સ ફાઇલ અપલોડને સપોર્ટ કરતા નથી, અને અન્ય 'બ્રાઉઝ' બટનને ક્ષેત્રની બહાર પણ વિસ્તૃત બનાવે છે. આ તેને સ્ટાઇલ કરવામાં મુશ્કેલ બનાવે છે. તો શું કરી શકાય? આ ધ્યેય હાંસલ કરવા માટે આ લેખ ચોક્કસ બટન સાથે ઉકેલ લાગુ કરે છે.

જાવાસ્ક્રિપ્ટ સોલ્યુશન

અમારા સોલ્યુશનમાં મૂળ 'બ્રાઉઝ' બટનને છુપાવવાનું અને નવું બનાવવાનો સમાવેશ થાય છે, જે ક્લિક કરવામાં આવે ત્યારે, છુપાયેલ ફાઇલ ઇનપુટ સંવાદને ટ્રિગર કરે છે.
આ કરવા માટે, અમે JavaScript માં 'ક્લિક' ઇવેન્ટનો ઉપયોગ કરી શકીએ છીએ.

//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();
}

ફાઇલ પસંદ કર્યા પછી, તમે ફાઇલ ઇનપુટની 'ફાઇલ્સ' ગુણધર્મને ઍક્સેસ કરીને JavaScript સાથે ફાઇલ ડેટા મેળવી શકો છો:

let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];

કાર્યક્ષમતા વધારવા માટે પુસ્તકાલયો

જો તમે એક ડગલું આગળ જઈને ફાઈલ પ્રોસેસિંગ લાઈબ્રેરીઓ સાથે કામ કરવા ઈચ્છો છો, ફાઇલરીડર API શરૂ કરવા માટે એક ઉત્તમ સ્થળ છે. આ API સાથે, તમે વપરાશકર્તાના કમ્પ્યુટર પર સંગ્રહિત ફાઇલો (અથવા કાચા ડેટા બફર્સ) ની સામગ્રી વાંચી શકો છો.

let reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result);
}
reader.readAsText(file);

સમાન કાર્યો અને વધુ વાંચન

વધુ શીખવા માટે, તમે અન્વેષણ કરી શકો છો ફાઇલ API અને ફોર્મડેટા વસ્તુઓ ફાઇલ API ફાઇલો વિશે માહિતી પ્રદાન કરે છે અને વેબ બ્રાઉઝરમાં JavaScript ને તેમની સામગ્રીને ઍક્સેસ કરવાની મંજૂરી આપે છે જ્યારે FormData નો ઉપયોગ XMLHttpRequest નો ઉપયોગ કરીને મોકલવા માટે કી/મૂલ્ય જોડીનો સમૂહ બનાવવા માટે થાય છે.

એકંદરે, JavaScript ડેવલપર તરીકે, બ્રાઉઝરમાં ફાઇલોની હેરફેરમાં નિપુણતા મેળવવી એ એક ઉપયોગી કૌશલ્ય બની શકે છે, જે તમને ઇન્ટરેક્ટિવ, વપરાશકર્તા-મૈત્રીપૂર્ણ ફોર્મ્સ અને એપ્લિકેશન્સ બનાવવા માટે સક્ષમ બનાવે છે.