ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳು ಮತ್ತು ಪ್ರಗತಿ ಸೂಚಕಗಳೊಂದಿಗೆ ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ವರ್ಧಿಸುವುದು
ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಫೈಲ್ ಅಪ್ಲೋಡ್ ಕಾರ್ಯವನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವು ತಡೆರಹಿತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಸೀಮಿತಗೊಳಿಸುವುದು ಮತ್ತು ಫೈಲ್ ಅನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುತ್ತಿರುವಾಗ ನೈಜ-ಸಮಯದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುವುದು ಈ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಎರಡು ಮಾರ್ಗಗಳಾಗಿವೆ.
2 MB ಗರಿಷ್ಠ ಗಾತ್ರಕ್ಕೆ ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ನಿರ್ಬಂಧಿಸಲು JavaScript ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಈ ಪೋಸ್ಟ್ ಚರ್ಚಿಸುತ್ತದೆ. ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯ ಉದ್ದಕ್ಕೂ ಬಳಕೆದಾರರ ಭಾಗವಹಿಸುವಿಕೆಯನ್ನು ಸುಧಾರಿಸಲು, ನೈಜ ಸಮಯದಲ್ಲಿ ಅಪ್ಲೋಡ್ ಪ್ರಗತಿಯನ್ನು ತೋರಿಸುವ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಹೇಗೆ ಸೇರಿಸಬೇಕು ಎಂಬುದನ್ನು ಸಹ ನಾವು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.
ಸರ್ವರ್ ಸಾಮರ್ಥ್ಯವನ್ನು ಓವರ್‌ಲೋಡ್ ಮಾಡುವ ಅಥವಾ ದೀರ್ಘವಾದ ಅಪ್ಲೋಡ್ ವಿಳಂಬಕ್ಕೆ ಕಾರಣವಾಗುವ ಬೃಹತ್ ಫೈಲ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲು ಫೈಲ್ ಗಾತ್ರದ ಮಿತಿಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಬಳಕೆದಾರರು ಅನುಮತಿಗಿಂತ ದೊಡ್ಡದಾದ ಫೈಲ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ, ಎಚ್ಚರಿಕೆ ಸಂದೇಶವು ಅವರಿಗೆ ಎಚ್ಚರಿಕೆ ನೀಡಬಹುದು, ಕಾರ್ಯವಿಧಾನವನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ.
ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ನ ಗೋಚರತೆಯನ್ನು ಹೇಗೆ ನಿಯಂತ್ರಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ನಾವು ಹೋಗುತ್ತೇವೆ ಇದರಿಂದ ಅದು ಅಪ್ಲೋಡ್ ನಡೆಯುತ್ತಿರುವಾಗ ಮಾತ್ರ ತೋರಿಸುತ್ತದೆ. ಇದು ಐಡಲ್ ಹಂತಗಳಲ್ಲಿ ಅಚ್ಚುಕಟ್ಟಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ದೃಶ್ಯ ಇನ್ಪುಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
| ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
|---|---|
| XMLHttpRequest.upload | ಪ್ರಗತಿಯಂತಹ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಬಂಧಿಸುವ ಮೂಲಕ, ಈ ಆಜ್ಞೆಯು ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳ ಸ್ಥಿತಿಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳ ಸಮಯದಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ತಲುಪಿಸಲು ಇದು ಅತ್ಯಗತ್ಯ ಮತ್ತು ಅಪ್ಲೋಡ್ ಮಾಡಿದ ವಸ್ತುವಿನ ಪ್ರಮಾಣವನ್ನು ನಿರ್ಧರಿಸುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ. |
| FormData.append() | ಈ ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಫಾರ್ಮ್‌ಡೇಟಾ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಕೀ-ಮೌಲ್ಯದ ಜೋಡಿಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಫೈಲ್ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಅವಶ್ಯಕವಾಗಿದೆ ಏಕೆಂದರೆ ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳ ಸಂದರ್ಭದಲ್ಲಿ ವಿನಂತಿಯ ಮೂಲಕ ಅದನ್ನು ತಲುಪಿಸುವ ಮೊದಲು ಫೈಲ್ ಡೇಟಾವನ್ನು ಸೇರಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. |
| progressContainer.style.display | JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು, ಈ ಆಜ್ಞೆಯು ನೇರವಾಗಿ ಒಂದು ಅಂಶದ CSS ಆಸ್ತಿಯನ್ನು ಮಾರ್ಪಡಿಸುತ್ತದೆ. ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳ ಸಮಯದಲ್ಲಿ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಅವಲಂಬಿಸಿ ಬಾರ್ ಅನ್ನು ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಅದನ್ನು ಬಳಸುವ ಮೂಲಕ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ತೋರಿಸಲಾಗುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. |
| e.lengthComputable | ಈ ಪ್ಯಾರಾಮೀಟರ್ ಅಪ್‌ಲೋಡ್‌ನ ಸಂಪೂರ್ಣ ಗಾತ್ರ ತಿಳಿದಿದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಪ್ರಗತಿ ಪಟ್ಟಿಯ ಸರಿಯಾದ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಹುಮುಖ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ ಅಪ್ಲೋಡ್ ಉದ್ದವು ಕಂಪ್ಯೂಟಬಲ್ ಆಗಿರುವಾಗ ಮಾತ್ರ ಅದನ್ನು ಗಣಿಸಬಹುದು. |
| xhr.upload.addEventListener('progress') | ಈ ಆಜ್ಞೆಯೊಂದಿಗೆ, ಅಪ್ಲೋಡ್ ಪ್ರಗತಿಗಾಗಿ ಈವೆಂಟ್ ಕೇಳುಗನನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಫೈಲ್ ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಿಫ್ರೆಶ್ ಮಾಡಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಪ್ರಗತಿಯ ನವೀಕರಣಗಳನ್ನು ಆಲಿಸುತ್ತದೆ. |
| Math.round() | ಅಪ್ಲೋಡ್ ಮಾಡಲಾದ ಫೈಲ್‌ನ ಅಂದಾಜು ಅನುಪಾತವು ಈ ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಹತ್ತಿರದ ಪೂರ್ಣ ಸಂಖ್ಯೆಗೆ ದುಂಡಾಗಿರುತ್ತದೆ. ಪ್ರಗತಿ ಪಟ್ಟಿಯಲ್ಲಿ ಸ್ಪಷ್ಟವಾದ, ಸ್ಪಷ್ಟವಾದ ಶೇಕಡಾವಾರು ("49.523%" ಗಿಂತ "50%" ನಂತಹ) ಗೋಚರಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಾತರಿಪಡಿಸುತ್ತದೆ. |
| xhr.onload | ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪೂರ್ಣಗೊಂಡಾಗ, ಈ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ. ಸರ್ವರ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಯಶಸ್ಸು ಅಥವಾ ದೋಷ ಅಧಿಸೂಚನೆಗಳ ಪ್ರದರ್ಶನ ಸೇರಿದಂತೆ ಅಪ್‌ಲೋಡ್‌ನ ನಂತರದ ಪರಿಣಾಮವನ್ನು ನಿಯಂತ್ರಿಸಲು ಇದನ್ನು ಬಳಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ. |
| alert() | ಬಳಕೆದಾರರು ಅನುಮತಿಸಿದ್ದಕ್ಕಿಂತ ದೊಡ್ಡದಾದ ಫೈಲ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದರೆ, ಈ ಆಜ್ಞೆಯು ಅವರಿಗೆ ತಿಳಿಸಲು ಪಾಪ್ಅಪ್ ವಿಂಡೋವನ್ನು ತೆರೆಯುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ತ್ವರಿತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ. |
JavaScript ನಲ್ಲಿ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಗಾತ್ರದ ಮಿತಿಗಳು ಮತ್ತು ಪ್ರಗತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಒದಗಿಸಲಾದ JavaScript ಕೋಡ್‌ನ ಮುಖ್ಯ ಉದ್ದೇಶವೆಂದರೆ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ ಪ್ರಗತಿ ಪಟ್ಟಿಯ ಮೂಲಕ ಬಳಕೆದಾರರಿಗೆ ನೈಜ-ಸಮಯದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವುದು ಮತ್ತು ಅಪ್ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್‌ಗಳ ಗಾತ್ರವನ್ನು ಗರಿಷ್ಠ 2 MB ಗೆ ನಿರ್ಬಂಧಿಸುವುದು. ಇದನ್ನು ಮಾಡುವುದರಿಂದ, ಬಳಕೆದಾರರು ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ದುರ್ಬಲಗೊಳಿಸಬಹುದಾದ ಬೃಹತ್ ಫೈಲ್‌ಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಅಪ್ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬಹುದು. ದಿ ಫೈಲ್ ಗಾತ್ರದ ಆಸ್ತಿಯ ಷರತ್ತುಬದ್ಧ ಪರಿಶೀಲನೆಯು ಫೈಲ್‌ಗಳನ್ನು 2 MB ಗಿಂತ ದೊಡ್ಡದಾಗಿ ನಿಲ್ಲಿಸಲು ಬಳಸುವ ಪ್ರಾಥಮಿಕ ಆಜ್ಞೆಯಾಗಿದೆ. ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಲ್ಲಿಸಲಾಗಿದೆ ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಬಳಕೆದಾರರಿಗೆ ಸೂಚನೆ ನೀಡಲಾಗುತ್ತದೆ ಫೈಲ್ ತುಂಬಾ ದೊಡ್ಡದಾಗಿದ್ದರೆ ವಿಧಾನ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು a ನಲ್ಲಿ ಸುತ್ತುತ್ತದೆ ಅದನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಲು ಸಿದ್ಧಗೊಳಿಸಲು ಆಬ್ಜೆಕ್ಟ್ ಮಾಡಿ. ಇದು ಫೈಲ್ ಡೇಟಾವನ್ನು ಸಾಂಪ್ರದಾಯಿಕ ರೀತಿಯಲ್ಲಿ POST ವಿನಂತಿಯ ಮೂಲಕ ಒದಗಿಸಲು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ನಿಜವಾದ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಅನ್ನು ನಂತರ XMLHttpRequest ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲದೇ AJAX ಶೈಲಿಯಲ್ಲಿ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ಅನುಮತಿಸಲು ಈ ವಸ್ತುವು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ. XMLHttpRequest ನ ಮುಕ್ತ() ವಿಧಾನವು ವಿನಂತಿಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಕಳುಹಿಸು() ವಿಧಾನವು ಅಪ್ಲೋಡ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಒಂದೇ ಪುಟದಲ್ಲಿ ಉಳಿಯುವುದರಿಂದ, ಇದು ತಡೆರಹಿತ ಅನುಭವವನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
ಅಪ್ಲೋಡ್ ಪ್ರಗತಿಯನ್ನು ತೋರಿಸುವುದು ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಮುಖ್ಯ ಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ದಿ 'ಪ್ರಗತಿ' ಈವೆಂಟ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸುವ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಇದನ್ನು ಮಾಡಲು ಆಬ್ಜೆಕ್ಟ್ ಮಾಡಬಹುದು. ಡೇಟಾವನ್ನು ಸಲ್ಲಿಸಿದ ತಕ್ಷಣ, ಪ್ರಗತಿ ಮೀಟರ್ ತಕ್ಷಣವೇ ರಿಫ್ರೆಶ್ ಆಗುತ್ತದೆ. ದಿ ಆಜ್ಞೆಯು ಪ್ರಗತಿಯ ನಿಖರವಾದ ಲೆಕ್ಕಾಚಾರವನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ, ಅಪ್ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಸಿಸ್ಟಮ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಪ್ರಗತಿ ಬಾರ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಈ ರೀತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯು ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.
ಕೊನೆಯದಾಗಿ, ಫೈಲ್ ಅಪ್ಲೋಡ್ ಮುಗಿದ ನಂತರ, ಸರ್ವರ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಆನ್‌ಲೋಡ್ ಕಾರ್ಯವು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ. ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯ ಯಶಸ್ಸು ಅಥವಾ ವೈಫಲ್ಯವನ್ನು ಲಾಗ್ ಮಾಡುವುದರ ಜೊತೆಗೆ ಫಲಿತಾಂಶದ ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಲು ಈ ಕಾರ್ಯವನ್ನು ವಿಸ್ತರಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಫೈಲ್ ಅಪ್ಲೋಡ್ ವಿಫಲವಾದರೆ, ದೋಷ ಸಂದೇಶ ಅಥವಾ ಯಶಸ್ಸಿನ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ. ಇದಲ್ಲದೆ, ಅಪ್ಲೋಡ್ ನಡೆಯದಿರುವಾಗ UI ಅನ್ನು ಅಸ್ತವ್ಯಸ್ತಗೊಳಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು, ಫೈಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಅಪ್ಲೋಡ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಈ ಗುಣಗಳ ಸಂಯೋಜನೆಯಿಂದಾಗಿ ಯಾವುದೇ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ತಡೆರಹಿತ, ಸುರಕ್ಷಿತ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು.
ಫೈಲ್ ಅಪ್ಲೋಡ್ ನಿರ್ಬಂಧಗಳು ಮತ್ತು ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತಿದೆ
ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಗತಿ ವರದಿಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು XMLHttpRequest ಮತ್ತು ಶುದ್ಧ JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಫೈಲ್ ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆ ಮತ್ತು ಸೂಕ್ತವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸಹ ಖಾತರಿಪಡಿಸಲಾಗಿದೆ.
// HTML form for file upload<form id="uploadForm"><input type="file" id="fileInput" accept="image/*" required /><div id="progressContainer" style="display: none;"><progress id="uploadProgress" value="0" max="100"></progress><span id="progressText"></span></div><button type="submit">Upload</button></form>// JavaScript for file upload handling<script>document.getElementById('uploadForm').addEventListener('submit', function(event) {event.preventDefault(); // Prevent default form submissionconst fileInput = document.getElementById('fileInput');const file = fileInput.files[0]; // Get the selected fileconst maxSize = 2 * 1024 * 1024; // Maximum file size: 2MBif (file.size > maxSize) { // Check if file exceeds size limitalert('File size exceeds 2 MB. Please select a smaller file.');return; // Abort if the file is too large}const formData = new FormData(); // Prepare form data for uploadformData.append('file', file);const progressContainer = document.getElementById('progressContainer');const uploadProgress = document.getElementById('uploadProgress');const progressText = document.getElementById('progressText');progressContainer.style.display = 'block'; // Show progress barconst xhr = new XMLHttpRequest(); // Create an XMLHttpRequest for uploadxhr.open('POST', '/upload', true);xhr.upload.addEventListener('progress', function(e) {if (e.lengthComputable) { // Update progressconst percentComplete = (e.loaded / e.total) * 100;uploadProgress.value = percentComplete;progressText.textContent = Math.round(percentComplete) + '% uploaded';}});xhr.onload = function() { // Handle the responseif (xhr.status === 200) {console.log('Upload complete:', JSON.parse(xhr.responseText));} else {console.error('Upload failed:', xhr.statusText);}};xhr.send(formData); // Start file upload});</script>
Fetch API ಬಳಸಿಕೊಂಡು ಪರ್ಯಾಯ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪರಿಹಾರ
ಈ ಪರಿಹಾರವು ಫೈಲ್ ಅಪ್ಲೋಡ್ ಮಿತಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೂಲಕ ಪ್ರಸ್ತುತ ವೆಬ್ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು Fetch API ಮೂಲಕ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಪ್ರಗತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
// HTML remains the same// JavaScript with Fetch API<script>document.getElementById('uploadForm').addEventListener('submit', async function(event) {event.preventDefault();const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const maxSize = 2 * 1024 * 1024;if (file.size > maxSize) {alert('File size exceeds 2 MB. Please select a smaller file.');return;}const progressContainer = document.getElementById('progressContainer');const uploadProgress = document.getElementById('uploadProgress');const progressText = document.getElementById('progressText');progressContainer.style.display = 'block';const formData = new FormData();formData.append('file', file);// Use fetch for uploadconst xhr = new XMLHttpRequest();xhr.open('POST', '/upload', true);xhr.upload.onprogress = function(e) {if (e.lengthComputable) {const percentComplete = (e.loaded / e.total) * 100;uploadProgress.value = percentComplete;progressText.textContent = Math.round(percentComplete) + '% uploaded';}};xhr.send(formData);});</script>
ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ಭದ್ರತೆಯನ್ನು ಹೆಚ್ಚಿಸುವುದು
ಫೈಲ್‌ಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬೇಕಾದ ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಸರ್ವರ್‌ನ ಭದ್ರತೆ ಮತ್ತು ಸಿಸ್ಟಮ್ ಸಮಗ್ರತೆ. ಜನರು ತುಂಬಾ ದೊಡ್ಡದಾದ ಅಥವಾ ಅಪಾಯಕಾರಿ ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಫೈಲ್‌ಗಳನ್ನು ಸಲ್ಲಿಸಲು ಸಾಧ್ಯವಿದೆ. ಹೀಗಾಗಿ, ಫೈಲ್ ಗಾತ್ರದ ಮಿತಿಯನ್ನು ಹೇರುವುದು ಈ ಅಪಾಯಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಬಳಸಲು ಸುಲಭವಾದ ಆದರೆ ಶಕ್ತಿಯುತವಾದ ತಂತ್ರವಾಗಿದೆ. ಅಪ್ಲೋಡ್ ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಫೈಲ್ ಗಾತ್ರವನ್ನು ಹಿಂದೆ ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಪರಿಶೀಲಿಸಲಾಗುತ್ತದೆ. 2 MB ಫೈಲ್ ಗಾತ್ರದ ಮಿತಿಯನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ ಸರ್ವರ್‌ಗಳು ಮತ್ತು ಹಾಗ್ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದಾದ ಬೃಹತ್ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಸಿಸ್ಟಮ್ ಅನ್ನು ಓವರ್‌ಲೋಡ್ ಮಾಡುವುದನ್ನು ಬಳಕೆದಾರರು ತಪ್ಪಿಸಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಸರ್ವರ್-ಸೈಡ್ ಮತ್ತು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಫೈಲ್ ಗಾತ್ರದ ಪರಿಶೀಲನೆ ಗ್ಯಾರಂಟಿಗಳನ್ನು ಸುಧಾರಿಸಲಾಗಿದೆ .
ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಮತ್ತೊಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ. ಫೈಲ್‌ಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ, ಉತ್ತಮವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಪ್ರಗತಿ ಪಟ್ಟಿಯು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ತಮ್ಮ ಅಪ್ಲೋಡ್ ಹೇಗೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ ಎಂಬುದನ್ನು ನೋಡಬಹುದು ಮತ್ತು ಈ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಮುಗಿಸಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬ ಅಂದಾಜು ಪಡೆಯಬಹುದು. ಫೈಲ್ ಅನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಮಾತ್ರ ತೋರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಹೆಚ್ಚು ಸುವ್ಯವಸ್ಥಿತ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮಾಡಲಾಗಿದೆ. ಅಪ್ಲೋಡ್ ವಿಫಲವಾದಾಗ ಅಥವಾ ಫೈಲ್ ತುಂಬಾ ದೊಡ್ಡದಾಗಿದ್ದರೆ ಸಿಸ್ಟಂ ಬಳಕೆದಾರರಿಗೆ ತ್ವರಿತವಾಗಿ ತಿಳಿಸುತ್ತದೆ, ಇದು ಕಿರಿಕಿರಿಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗ್ರಾಹಕರ ಸಂತೋಷವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
ಅಂತಿಮವಾಗಿ, ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿನ ಸ್ಕೇಲೆಬಿಲಿಟಿ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳಾಗಿವೆ. ಅಸಿಂಕ್ರೊನಸ್ ಕ್ರಿಯೆಗಳು ಆಪ್ಟಿಮೈಸ್ಡ್ ಕೋಡ್‌ನಿಂದ ಸಾಧ್ಯವಾಗಿದೆ, ಇದು ತಡೆರಹಿತ ಫೈಲ್ ಅಪ್ಲೋಡ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ. ಇದರ ಬಳಕೆ ಒಂದು ಉದಾಹರಣೆಯಾಗಿದೆ ವಸ್ತು. ಇದನ್ನು ಮಾಡುವುದರಿಂದ, ಪುಟದ ಮರುಲೋಡ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲಾಗುತ್ತದೆ, ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಫೈಲ್ ಕಂಪ್ರೆಷನ್, ಸುಧಾರಿತ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಡೇಟಾಬೇಸ್ ಇಂಟರ್ಯಾಕ್ಷನ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಂತಹ ಸರ್ವರ್-ಸೈಡ್ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸುವುದು ಬಹುಸಂಖ್ಯೆಯ ಬಳಕೆದಾರರು ಒಂದೇ ಬಾರಿಗೆ ಫೈಲ್‌ಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುವುದನ್ನು ನೀವು ನಿರೀಕ್ಷಿಸಿದರೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಈ ತಂತ್ರಗಳು ಲೋಡ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಭಾಯಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- JavaScript ನಲ್ಲಿ ಫೈಲ್ ಗಾತ್ರವನ್ನು ನಾನು ಹೇಗೆ ಮಿತಿಗೊಳಿಸುವುದು?
- ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಫೈಲ್ ಗಾತ್ರದ ನಿರ್ಬಂಧವನ್ನು ಹೊಂದಿಸಲು JavaScript ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಪರಿಶೀಲಿಸಲಾಗುತ್ತದೆ. ಗಾತ್ರವು ನಿಮ್ಮ ಮಿತಿಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ.
- ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳಿಗಾಗಿ ನಾನು Fetch API ಅನ್ನು ಬಳಸಬಹುದೇ?
- ವಾಸ್ತವವಾಗಿ, ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳಿಗೆ ಬಳಸಬಹುದು; ಆದಾಗ್ಯೂ, ಪ್ರಗತಿ ಟ್ರ್ಯಾಕಿಂಗ್ ಹೆಚ್ಚು ಕಷ್ಟಕರವಾಗುತ್ತದೆ. ಇದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಪರಿಹಾರೋಪಾಯಗಳು ಬೇಕಾಗುತ್ತವೆ .
- ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ ನಾನು ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಹೇಗೆ ತೋರಿಸುವುದು?
- ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಮೂಲಕ ಈವೆಂಟ್, ಅಪ್‌ಲೋಡ್‌ನ ಪ್ರಗತಿಯ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ನೀವು ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸಬಹುದು.
- ಕ್ಲೈಂಟ್-ಸೈಡ್ ಫೈಲ್ ಗಾತ್ರದ ಮೌಲ್ಯೀಕರಣ ಏಕೆ ಮುಖ್ಯ?
- ಕ್ಲೈಂಟ್-ಸೈಡ್ ಫೈಲ್ ಗಾತ್ರದ ಮೌಲ್ಯೀಕರಣದ ಮೂಲಕ ಬಳಕೆದಾರರು ಪ್ರಾಂಪ್ಟ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತಾರೆ, ಇದು ದೊಡ್ಡ ಫೈಲ್‌ಗಳಿಗಾಗಿ ಅನಗತ್ಯ ಸರ್ವರ್ ಪ್ರಶ್ನೆಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. ಆದರೆ ಫಾರ್ , ಯಾವಾಗಲೂ ಅದನ್ನು ಸರ್ವರ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣದೊಂದಿಗೆ ಜೋಡಿಸಿ.
- ಫೈಲ್ ಅಪ್ಲೋಡ್ ವಿಫಲವಾದರೆ ಏನಾಗುತ್ತದೆ?
- ದಿ ಅಥವಾ ನ ಘಟನೆ ಅಪ್‌ಲೋಡ್‌ಗಳಲ್ಲಿನ ವೈಫಲ್ಯಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಬಳಕೆದಾರರಿಗೆ ಎಚ್ಚರಿಕೆ ನೀಡಲು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು.
ಫೈಲ್ ಅಪ್ಲೋಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಲಾಗುತ್ತಿದೆ
ನೈಜ-ಸಮಯದ ಪ್ರಗತಿ ಸೂಚನೆಯನ್ನು ಒದಗಿಸುವುದು ಮತ್ತು ಅಪ್ಲೋಡ್ ಮಾಡಬಹುದಾದ ಫೈಲ್‌ಗಳ ಗಾತ್ರವನ್ನು ಮಿತಿಗೊಳಿಸುವುದು ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಬಳಕೆದಾರರು ತಮ್ಮ ಅಪ್‌ಲೋಡ್‌ಗಳ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ತಿಳಿದಿರುತ್ತಾರೆ ಮತ್ತು ದೊಡ್ಡ ಫೈಲ್‌ಗಳನ್ನು ಓವರ್‌ಲೋಡಿಂಗ್ ಸಿಸ್ಟಮ್‌ಗಳಿಂದ ಇರಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
ಈ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸಲು JavaScript ಅನ್ನು ಬಳಸಬಹುದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸುರಕ್ಷತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ. ಪ್ರಗತಿ ಪಟ್ಟಿಯು ಬಳಕೆದಾರರ ನಿಶ್ಚಿತಾರ್ಥವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳು ಕೆಲವು ಅಪಾಯಗಳಿಂದ ರಕ್ಷಿಸುತ್ತವೆ. ಈ ಶಿಫಾರಸು ಮಾಡಲಾದ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಸುವುದು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಬಳಸಲು ಸುಲಭವಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ಈ ಮೂಲವು ವಿವರವಾಗಿ ವಿವರಿಸುತ್ತದೆ ಪ್ರಗತಿಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ರಚಿಸಲು ಮತ್ತು ಫೈಲ್ ಗಾತ್ರದ ಮಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಆಬ್ಜೆಕ್ಟ್. ನಲ್ಲಿ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಭೇಟಿ ಮಾಡಿ MDN ವೆಬ್ ಡಾಕ್ಸ್ .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದರ ಕುರಿತು ಆಳವಾದ ವಿವರಣೆಗಾಗಿ, ಈ ಲೇಖನವು ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಮುಂಭಾಗ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ಪರಿಹಾರಗಳೆರಡನ್ನೂ ಕೇಂದ್ರೀಕರಿಸುವ ಅತ್ಯುತ್ತಮ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಲ್ಲಿ ಇನ್ನಷ್ಟು ಓದಿ JavaScript.info .
- ಈ ಮಾರ್ಗದರ್ಶಿ ಫೈಲ್ ಗಾತ್ರದ ಮೌಲ್ಯೀಕರಣದ ಪ್ರಾಮುಖ್ಯತೆ, ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಫೈಲ್ ಅಪ್‌ಲೋಡ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನಲ್ಲಿ ಸಂಪೂರ್ಣ ಉಲ್ಲೇಖವನ್ನು ನೋಡಿ W3 ಶಾಲೆಗಳು .