AJAX ಮತ್ತು jQuery ಬಳಸಿಕೊಂಡು ಸರ್ವರ್‌ಗೆ ಚಿತ್ರಗಳಂತಹ ಯಾವುದೇ ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುವುದು ಹೇಗೆ? ಇದನ್ನು ಮಾಡಲು ತುಂಬಾ ಸುಲಭ! ಮತ್ತು ಕೆಳಗೆ ನಾವು ಎಲ್ಲವನ್ನೂ ವಿವರವಾಗಿ ವಿಶ್ಲೇಷಿಸುತ್ತೇವೆ.

ಆ "ಪ್ರಾಚೀನ" ಕಾಲದಲ್ಲಿ, ಇನ್ನೂ ಯಾವುದೇ jQuery ಇಲ್ಲದಿದ್ದಾಗ ಅಥವಾ ಬಹುಶಃ ಒಂದು ಇದ್ದಾಗ, ಆದರೆ ಬ್ರೌಸರ್‌ಗಳು ಅಷ್ಟು ಅತ್ಯಾಧುನಿಕವಾಗಿಲ್ಲ, AJAX ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸೈಟ್‌ಗೆ ಫೈಲ್ ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುವುದು ಬೇಸರದ ಕೆಲಸವಾಗಿತ್ತು: iframes ನಂತಹ ಎಲ್ಲಾ ರೀತಿಯ ಊರುಗೋಲುಗಳ ಮೂಲಕ. ನಾನು ಆ ಸಮಯವನ್ನು ಹಿಡಿಯಲಿಲ್ಲ, ಮತ್ತು ಈಗ ಯಾರು ಕಾಳಜಿ ವಹಿಸುತ್ತಾರೆ? ಆದರೆ ಈಗ ಬೇರೆ ಯಾವುದೋ ಆಸಕ್ತಿದಾಯಕವಾಗಿದೆ - ಸೈಟ್ಗೆ ಫೈಲ್ಗಳನ್ನು ಉಳಿಸುವುದು ತುಂಬಾ ಸರಳವಾಗಿದೆ. AJAX ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ಅನುಭವ ಮತ್ತು ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದಿರದ ವೆಬ್‌ಮಾಸ್ಟರ್ ಕೂಡ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ತ್ವರಿತವಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಮತ್ತು ಈ ಲೇಖನವು ಅವನಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನೀವು ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು WordPress ಕಾರ್ಯಗಳೊಂದಿಗೆ ಬ್ಯಾಕಪ್ ಮಾಡಿದರೆ, ನಂತರ ಸುರಕ್ಷಿತವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು ಮತ್ತು ಸರ್ವರ್‌ಗೆ ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುವುದು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಷುಲ್ಲಕ ಮತ್ತು ಆಸಕ್ತಿದಾಯಕ ಕಾರ್ಯವಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ WordPress ನೊಂದಿಗೆ, ಲೇಖನದ ಅಂತ್ಯವನ್ನು ನೋಡಿ).

ಹೇಗಾದರೂ, ಎಲ್ಲವೂ ಎಷ್ಟು ಸರಳವಾಗಿದ್ದರೂ, ಫೈಲ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಕನಿಷ್ಠ ಅನುಭವ ಮತ್ತು ಎಂದು ಗಮನಿಸಬೇಕು ಮೂಲಭೂತ ಜ್ಞಾನ Javascript ನಲ್ಲಿ, jQuery ಮತ್ತು PHP ಇನ್ನೂ ಅಗತ್ಯವಿದೆ! ಕನಿಷ್ಠ, ಫೈಲ್‌ಗಳನ್ನು ಸರ್ವರ್‌ಗೆ ಹೇಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಊಹಿಸಬೇಕಾಗಿದೆ ಸಾಮಾನ್ಯ ರೂಪರೇಖೆ AJAX ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೀವು ಕೋಡ್ ಅನ್ನು ಸ್ವಲ್ಪವಾದರೂ ಓದಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

ಕೆಳಗೆ ವಿವರಿಸಿದ ವಿಧಾನವು ಸಾಕಷ್ಟು ಸ್ಥಿರವಾಗಿದೆ ಮತ್ತು ಮೂಲಭೂತವಾಗಿ ಅವಲಂಬಿತವಾಗಿದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಸ್ತುಹೊಸ FormData() , ಇದು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮೂಲಭೂತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ.

ವಸ್ತುವಿನ ಹೆಚ್ಚು ಅರ್ಥವಾಗುವ ಗ್ರಹಿಕೆಗಾಗಿ, ಅದನ್ನು ಹಂತಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ. ಅಷ್ಟೆ, ನಾವು ಹಾರೋಣ ...

AJAX ಫೈಲ್ ಅಪ್‌ಲೋಡ್: ಸಾಮಾನ್ಯ ಉದಾಹರಣೆ

ಇದು ಎಲ್ಲಾ ಸೈಟ್ನಲ್ಲಿ ಲಭ್ಯತೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರಗಳು ಫೈಲ್ ಪ್ರಕಾರ. ಈ ಕ್ಷೇತ್ರವು ಫಾರ್ಮ್ (ಟ್ಯಾಗ್) ನ ಭಾಗವಾಗಿರಲು ಅಗತ್ಯವಿಲ್ಲ.

ಹೀಗಾಗಿ, ನಾವು ಫೈಲ್ ಕ್ಷೇತ್ರದೊಂದಿಗೆ HTML ಕೋಡ್ ಮತ್ತು "ಫೈಲ್ಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ" ಬಟನ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ.

ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಿ

ಹಂತ 1. ಫೈಲ್ ಕ್ಷೇತ್ರದಿಂದ ಡೇಟಾ

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್‌ಗಳ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು ಮೊದಲ ಹಂತವಾಗಿದೆ.

ನೀವು ಫೈಲ್ ಫೀಲ್ಡ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಆಯ್ಕೆಯ ನಂತರ ಫೈಲ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು ಒಂದು ವಿಂಡೋ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಅವುಗಳ ಬಗ್ಗೆ ಡೇಟಾವನ್ನು ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರದಲ್ಲಿ ಉಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಾವು ಅಲ್ಲಿಂದ "ಪಿಕ್ ಅಪ್" ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇದನ್ನು ಮಾಡಲು, JS ವೇರಿಯಬಲ್ ಫೈಲ್‌ಗಳಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಫೈಲ್ ಫೀಲ್ಡ್ ಡೇಟಾವನ್ನು ಉಳಿಸುವ ಬದಲಾವಣೆ JS ಈವೆಂಟ್‌ಗೆ ನಾವು ಕಾರ್ಯವನ್ನು ಲಗತ್ತಿಸುತ್ತೇವೆ:

ವರ್ ಫೈಲ್‌ಗಳು; // ವೇರಿಯಬಲ್. ಫೈಲ್ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ // ಕ್ಷೇತ್ರ ಮೌಲ್ಯವು ಫೈಲ್ ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಡೇಟಾದೊಂದಿಗೆ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಭರ್ತಿ ಮಾಡಿ $("ಇನ್ಪುಟ್").on("ಚೇಂಜ್", ಫಂಕ್ಷನ್())(ಫೈಲ್ಗಳು = this.files; ));

ಹಂತ 2. AJAX ವಿನಂತಿಯನ್ನು ರಚಿಸಿ (ಕ್ಲಿಕ್ ಮೂಲಕ)

ನಾವು ಫೈಲ್ ಡೇಟಾವನ್ನು ಹೊಂದಿದ್ದೇವೆ, ಈಗ ನಾವು ಅದನ್ನು AJAX ಮೂಲಕ ಕಳುಹಿಸಬೇಕಾಗಿದೆ. "ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಿ" ಬಟನ್‌ನಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಲು ನಾವು ಈ ಈವೆಂಟ್ ಅನ್ನು ನಿಯೋಜಿಸುತ್ತೇವೆ.

ಕ್ಲಿಕ್ ಮಾಡುವ ಕ್ಷಣದಲ್ಲಿ ನಾವು ರಚಿಸುತ್ತೇವೆ ಹೊಸ ವಸ್ತುಹೊಸ formData() ಮತ್ತು ಅದಕ್ಕೆ ವೇರಿಯೇಬಲ್ ಫೈಲ್‌ಗಳಿಂದ ಡೇಟಾವನ್ನು ಸೇರಿಸಿ. ಫಾರ್ಮ್‌ಡೇಟಾ() ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಾವು ಸಲ್ಲಿಸಿದ ಡೇಟಾವು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಿದಂತೆ ಕಾಣುತ್ತದೆ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ.

ಅಂತಹ ವಿನಂತಿಯು ನಡೆಯಲು, ನೀವು jQuery ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ನಿಯತಾಂಕಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ AJAX ನಿಯತಾಂಕಗಳು, ಅದಕ್ಕಾಗಿಯೇ ಪರಿಚಿತ ಕಾರ್ಯ$.post() ಸೂಕ್ತವಲ್ಲ ಮತ್ತು ನಾವು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಅನಲಾಗ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ: $.ajax() .

ಎರಡು ಪ್ರಮುಖ ಹೆಚ್ಚುವರಿ ನಿಯತಾಂಕಗಳುತಪ್ಪಾಗಿ ಹೊಂದಿಸಬೇಕಾಗಿದೆ:

ProcessData ರವಾನೆಯಾದ ಡೇಟಾದ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಉದಾಹರಣೆಗೆ, ಫಾರ್ ವಿನಂತಿಗಳನ್ನು ಪಡೆಯಿರಿ jQuery ಡೇಟಾವನ್ನು ಪ್ರಶ್ನೆ ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ಆ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು URL ನ ಅಂತ್ಯಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ. ಫಾರ್ ಪೋಸ್ಟ್ ಡೇಟಾಇತರ ರೂಪಾಂತರಗಳನ್ನು ಮಾಡುತ್ತದೆ. ಮೂಲ ಡೇಟಾಗೆ ಯಾವುದೇ ಬದಲಾವಣೆಗಳು ನಮ್ಮೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಈ ಆಯ್ಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತೇವೆ... ವಿಷಯದ ಪ್ರಕಾರ ವಿನಂತಿಯ ಪ್ರಕಾರದ ಶೀರ್ಷಿಕೆಯನ್ನು ಹೊಂದಿಸುವುದನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ jQuery ಸ್ಥಾಪನೆ"ಅಪ್ಲಿಕೇಶನ್/x-www-form-urlencoded" ಗೆ ಸಮನಾಗಿರುತ್ತದೆ ಈ ಹೆಡರ್ ನೀವು ಈ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು "ಮಲ್ಟಿಪಾರ್ಟ್ /ಫಾರ್ಮ್-ಡೇಟಾ" ಗೆ ಹೊಂದಿಸಿದರೆ, PHP ಗೆ ವರ್ಗಾವಣೆಯಾಗುತ್ತಿರುವ ಡೇಟಾವನ್ನು ಗುರುತಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ. "ಮಲ್ಟಿಪಾರ್ಟ್/ಫಾರ್ಮ್ -ಡೇಟಾದಲ್ಲಿ ಗಡಿ ಕಾಣೆಯಾಗಿದೆ" ಎಂಬ ಎಚ್ಚರಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ... ಸಾಮಾನ್ಯವಾಗಿ, ಈ ಆಯ್ಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಸುಲಭವಾದ ಮಾರ್ಗವಾಗಿದೆ, ನಂತರ ಎಲ್ಲವೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ // ಪ್ರಕ್ರಿಯೆ ಮತ್ತು! AJAX ಕಳುಹಿಸಲಾಗುತ್ತಿದೆನೀವು upload_files ಬಟನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ವಿನಂತಿಸಿ ಪ್ರಸ್ತುತ ಅಂಶಕ್ಕಾಗಿ ಡೀಫಾಲ್ಟ್ ಈವೆಂಟ್ - ಕ್ಲಿಕ್ ಮಾಡಿ ಟ್ಯಾಗ್ // ಫೈಲ್‌ಗಳು ಖಾಲಿಯಾಗಿದ್ದರೆ ಏನನ್ನೂ ಮಾಡಬೇಡಿ (ಕಡತಗಳ ಪ್ರಕಾರ == "ನಿರ್ದಿಷ್ಟ") ಹಿಂತಿರುಗಿಸಿದರೆ;
"; )) $(".ajax-reply").html(html); // ದೋಷ ಬೇರೆ (console.log("ERROR: " + response.error); ) ), // ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ದೋಷ ಕಾರ್ಯ ದೋಷ: ಕಾರ್ಯ(jqXHR, ಸ್ಥಿತಿ, ದೋಷ ಥ್ರೋನ್)( console.log("AJAX ವಿನಂತಿ ದೋಷ: " + ಸ್ಥಿತಿ, jqXHR); ) );

ಹಂತ 3. ವಿನಂತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ: ಸರ್ವರ್‌ಗೆ ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಿ

ಈಗ ಕೊನೆಯ ಹಂತ: ನೀವು ಕಳುಹಿಸಿದ ವಿನಂತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬೇಕಾಗಿದೆ.

ಅದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸಲು, ನಾವು ವಿನಂತಿಯನ್ನು ಇಲ್ಲದೆಯೇ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತೇವೆ ಹೆಚ್ಚುವರಿ ತಪಾಸಣೆಗಳುಫೈಲ್ಗಳಿಗಾಗಿ, ಅಂದರೆ. ಸ್ವೀಕರಿಸಿದ ಫೈಲ್‌ಗಳನ್ನು ಉಳಿಸಿ ಬಯಸಿದ ಫೋಲ್ಡರ್. ಆದರೂ, ಭದ್ರತೆಗಾಗಿ, ಕಳುಹಿಸಿದ ಫೈಲ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಬೇಕು, ಕನಿಷ್ಠ ಫೈಲ್ ವಿಸ್ತರಣೆ (ಪ್ರಕಾರ)...

ಕೆಳಗಿನ ಕೋಡ್‌ನೊಂದಿಗೆ submit.php ಫೈಲ್ ಅನ್ನು ರಚಿಸೋಣ (AJAX ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಲಾದ ಫೈಲ್‌ನಂತೆಯೇ submit.php ಅದೇ ಫೋಲ್ಡರ್‌ನಲ್ಲಿದೆ ಎಂದು ಊಹಿಸಲಾಗಿದೆ):

jQuery(ಡಾಕ್ಯುಮೆಂಟ್).ರೆಡಿ(ಫಂಕ್ಷನ್($)( // ಫೈಲ್‌ಗೆ ಲಿಂಕ್ AJAX ಹ್ಯಾಂಡ್ಲರ್ var ajaxurl = ""; var nonce = ""; var ಫೈಲ್‌ಗಳು; // ವೇರಿಯಬಲ್. ಫೈಲ್ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ // ಯಾವಾಗ ಡೇಟಾದೊಂದಿಗೆ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಭರ್ತಿ ಮಾಡಿ ಬದಲಾದ ಕ್ಷೇತ್ರ ಮೌಲ್ಯಗಳ ಫೈಲ್ $("ಇನ್‌ಪುಟ್").on("ಬದಲಾವಣೆ", ಕಾರ್ಯ())(ಫೈಲ್‌ಗಳು = this.files; )); // upload_files ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ AJAX ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಲಾಗುತ್ತಿದೆ. upload_files").on ("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್(ಈವೆಂಟ್)( event.stopPropagation(); // ಎಲ್ಲಾ ಪ್ರಸ್ತುತ JS ಈವೆಂಟ್‌ಗಳನ್ನು ನಿಲ್ಲಿಸುವುದು event.preventDefault(); // ಪ್ರಸ್ತುತ ಅಂಶಕ್ಕಾಗಿ ಡೀಫಾಲ್ಟ್ ಈವೆಂಟ್ ಅನ್ನು ನಿಲ್ಲಿಸುವುದು - ಇದಕ್ಕಾಗಿ ಕ್ಲಿಕ್ ಮಾಡಿ ಟ್ಯಾಗ್ // ಫೈಲ್‌ಗಳು ಖಾಲಿಯಾಗಿದ್ದರೆ ಏನನ್ನೂ ಮಾಡಬೇಡಿ (ಕಡತಗಳ ಪ್ರಕಾರ == "ನಿರ್ದಿಷ್ಟ") ಹಿಂತಿರುಗಿಸಿದರೆ;
// var ಡೇಟಾವನ್ನು ಕಳುಹಿಸಲು ಸೂಕ್ತವಾದ ಸ್ವರೂಪದಲ್ಲಿ ಫೈಲ್ ಡೇಟಾವನ್ನು ರಚಿಸಿ = ಹೊಸ FormData();
$.each(ಫೈಲ್‌ಗಳು, ಫಂಕ್ಷನ್(ಕೀ, ಮೌಲ್ಯ)(data.append(key, value); ));
// ವಿನಂತಿಯನ್ನು ಗುರುತಿಸುವ ವೇರಿಯಬಲ್ ಡೇಟಾ ಸೇರಿಸಿ. append("ಆಕ್ಷನ್", "ajax_fileload");
data.append("nonce", nonce);
data.append("post_id", $("body").attr("class").match(/postid-(+)/));
},
var $reply = $(".ajax-reply");
});
});

// AJAX ವಿನಂತಿ $reply.text("ಲೋಡ್ ಆಗುತ್ತಿದೆ...");

$.ajax(( url: ajaxurl, ಪ್ರಕಾರ: "POST", ಡೇಟಾ: ಡೇಟಾ, ಸಂಗ್ರಹ: ತಪ್ಪು, ಡೇಟಾ ಪ್ರಕಾರ: "json", // ರವಾನೆಯಾದ ಡೇಟಾದ ಸಂಸ್ಕರಣೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ, ಅದನ್ನು ಪ್ರಕ್ರಿಯೆಯಂತೆ ರವಾನಿಸಲು ಅನುಮತಿಸಿ ಡೇಟಾ: ತಪ್ಪು, // ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಟೈಪ್ ಹೆಡರ್ ವಿನಂತಿಯನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ಇದು ಸ್ಟ್ರಿಂಗ್ ವಿನಂತಿಯ ವಿಷಯವಾಗಿದೆ ಎಂದು jQuery ಸರ್ವರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ: ತಪ್ಪು, // ಯಶಸ್ವಿ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಯ ಕಾರ್ಯ: ಕಾರ್ಯ (ಪ್ರತಿಕ್ರಿಯೆ, ಸ್ಥಿತಿ, jqXHR)( // ಸರಿ ಇದ್ದರೆ (respond.success) ($.each(respond.data, ಫಂಕ್ಷನ್) (ಕೀ, ವ್ಯಾಲ್)( $reply.append(""); )) // ದೋಷ ಬೇರೆ ($reply.text("ERROR:" + response.error); ) ) , // ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ದೋಷ ಕಾರ್ಯ ದೋಷ: ಕಾರ್ಯ(jqXHR, ಸ್ಥಿತಿ, ದೋಷ ಥ್ರೋನ್)( $reply.text("AJAX ವಿನಂತಿ ದೋಷ: " + ಸ್ಥಿತಿ); ) );

)); ))$(ಫಂಕ್ಷನ್() ("uploader " передаётся скрипт-обработчик. Теперь сам код этого обработчика:!}

$("#file_upload").uploadify((

"ಫಾರ್ಮ್‌ಡೇಟಾ" :( "ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್" : "","ಟೋಕನ್" : ""

"uploader" : "uploadify.php"
ಮತ್ತು ಬಹುಶಃ ಎಲ್ಲರೂ ಇದನ್ನು ಮಾಡಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ. ವಾಸ್ತವವಾಗಿ, ಎಲ್ಲವೂ ಅಂದುಕೊಂಡಷ್ಟು ಕಷ್ಟವಲ್ಲ.
IN ಈ ಪಾಠಫೈಲ್ ಅನ್ನು ಸರ್ವರ್‌ಗೆ (ಹೋಸ್ಟಿಂಗ್) ಅಪ್‌ಲೋಡ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಾನು ವಿವರಿಸುತ್ತೇನೆ.
ಬ್ರೌಸರ್ ಮತ್ತು ವೆಬ್ ಸರ್ವರ್ ನಡುವೆ ಡೇಟಾವನ್ನು ವಿನಿಮಯ ಮಾಡಲು ಅಜಾಕ್ಸ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ಪಾಕವಿಧಾನದಲ್ಲಿ ಬಳಸಲಾದ jQuery ಆವೃತ್ತಿ: 2.2.2.

ನಾವು ಪ್ರಾಚೀನ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ html ಟ್ಯಾಗ್‌ಗಳು, ತಲೆ ಮತ್ತು ದೇಹ.
IN ತಲೆ ಟ್ಯಾಗ್ನೀವು jquery ಲೈಬ್ರರಿಗೆ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸಬೇಕಾಗಿದೆ.
ಉದಾಹರಣೆಯಲ್ಲಿ ನಾನು Google ಸರ್ವರ್‌ನಿಂದ jquery ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ.

ದೇಹದ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ನಾವು ಇನ್‌ಪುಟ್ ಟ್ಯಾಗ್ ಮತ್ತು ಬಟನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಫಾರ್ಮ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.
ಇನ್‌ಪುಟ್ ಟೈಪ್="ಫೈಲ್" ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಲೋಡ್ ಮಾಡಲು ಫೈಲ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.
ಫೈಲ್ ಅನ್ನು ವರ್ಗಾಯಿಸಲು js ಕೋಡ್ ಅನ್ನು ರನ್ ಮಾಡಲು ಬಟನ್ ಟ್ಯಾಗ್ ಅಗತ್ಯವಿದೆ.

ನಾವು ಫಾರ್ಮ್ ಹೆಸರು = "ಅಪ್ಲೋಡರ್", ಎನ್ಕ್ಟೈಪ್ = "ಮಲ್ಟಿಪಾರ್ಟ್ / ಫಾರ್ಮ್-ಡೇಟಾ", ವಿಧಾನ = "ಪೋಸ್ಟ್" ಅನ್ನು ಹೊಂದಿಸಿದ್ದೇವೆ.
ಫಾರ್ಮ್ ಹೆಸರು: ಹೆಸರು = "ಅಪ್ಲೋಡರ್"
ಫಾರ್ಮ್ ಡೇಟಾ ಎನ್ಕೋಡಿಂಗ್ ವಿಧಾನ: enctype="multipart/form-data"
ಡೇಟಾ ವರ್ಗಾವಣೆ ವಿಧಾನ: method="POST"

ಈ ಫೈಲ್ ಅನ್ನು ಸಲ್ಲಿಸಿ: ಅಪ್‌ಲೋಡ್ ಮಾಡಿ

ಎಲ್ಲಾ html ಮತ್ತು js ಮಾರ್ಕ್ಅಪ್ ಕೋಡ್:
ಈ ಫೈಲ್ ಅನ್ನು ಸಲ್ಲಿಸಿ: ಅಪ್‌ಲೋಡ್ ಮಾಡಿ

ಮುಂದೆ ಹೋಗೋಣ ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್ಕೋಡ್.
ಫೈಲ್ ಅನ್ನು ವರ್ಗಾಯಿಸಲು, ನೀವು ಸಂಪೂರ್ಣ ಫಾರ್ಮ್ ಅನ್ನು ವರ್ಗಾಯಿಸಬೇಕು:
$("ಫಾರ್ಮ್").ಸಲ್ಲಿಸಿ(ಫಂಕ್ಷನ್(ಇ) (

ನಾವು ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ವೇರಿಯಬಲ್ ಆಗಿ ಓದುತ್ತೇವೆ:
var formData = ಹೊಸ FormData($(ಇದು));

ಮುಂದೆ, ವೆಬ್ ಸರ್ವರ್‌ಗೆ ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸಲು ನಾವು ಅಜಾಕ್ಸ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಬಳಸುತ್ತೇವೆ.
ಫೈಲ್ ವರ್ಗಾವಣೆ ಯಶಸ್ವಿಯಾದರೆ, ಪಾಪ್-ಅಪ್ ವಿಂಡೋದಲ್ಲಿ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ದೋಷ ಸಂಭವಿಸಿದಲ್ಲಿ ಅಥವಾ ಫೈಲ್ ಕಾಣೆಯಾಗಿದ್ದರೆ, ಉದ್ಭವಿಸಿದ ಸಮಸ್ಯೆಯ ಪಠ್ಯದೊಂದಿಗೆ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
$.ajax(( url: "file.php", ಪ್ರಕಾರ: "POST", ಡೇಟಾ: formData, async: false, success: function (msg) ( ಎಚ್ಚರಿಕೆ(msg); ), ದೋಷ: ಕಾರ್ಯ(msg) ( ಎಚ್ಚರಿಕೆ "ದೋಷ!") ಸಂಗ್ರಹ: ತಪ್ಪು, ವಿಷಯ ಪ್ರಕಾರ: ತಪ್ಪು, ಪ್ರಕ್ರಿಯೆ ಡೇಟಾ: ತಪ್ಪು ));

ಎಲ್ಲಾ ಕೋಡ್ ಜಾವಾ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿದೆ jquery ಬಳಸಿ:

ಈಗ ಫಾರ್ಮ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಲು ಸರ್ವರ್-ಸೈಡ್ ಕೋಡ್ ಮಾತ್ರ ಉಳಿದಿದೆ ಪೋಸ್ಟ್ ವಿಧಾನವಿನಂತಿ.

ನಾವು ಪಡೆಯುತ್ತೇವೆ ಮೂಲ ಡೈರೆಕ್ಟರಿಸೈಟ್ ಮತ್ತು ಫೈಲ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಫೋಲ್ಡರ್ ಅನ್ನು ನಿಯೋಜಿಸಿ:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್ ಅನ್ನು ಓದುವುದು:
$uploadfile = $uploaddir . ಮೂಲ ಹೆಸರು($_FILES["ಯೂಸರ್‌ಫೈಲ್"]["ಹೆಸರು"]);

ಫೈಲ್ ಲೋಡ್ ಆಗಿದೆಯೇ ಎಂದು ನಾವು ಪರಿಶೀಲಿಸುತ್ತೇವೆ.
ಒಳಬರುವ ಡೇಟಾಗೆ ಅನುಗುಣವಾಗಿ, ನಾವು ಜೊತೆಯಲ್ಲಿರುವ ಸಂದೇಶವನ್ನು ನಿಯೋಜಿಸುತ್ತೇವೆ.
ಫೈಲ್ ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡದಿದ್ದರೆ, ಅದನ್ನು $uploadfile ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಡೈರೆಕ್ಟರಿಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ:
ಒಂದು ವೇಳೆ (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "ಫೈಲ್ ಸರಿಯಾಗಿದೆ ಮತ್ತು ಯಶಸ್ವಿಯಾಗಿ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗಿದೆ.\n"; ) else ( $out = "ಸಾಧ್ಯವಾದ ಫೈಲ್ ಅಪ್‌ಲೋಡ್ ದಾಳಿ !\n";)

ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಕ್ರಮಗಳುಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ.

php ನಲ್ಲಿ ಎಲ್ಲಾ ಕೋಡ್:

ಎಲ್ಲಾ html ಕೋಡ್ js ಸೇರಿದಂತೆ:

ಈ ಫೈಲ್ ಅನ್ನು ಸಲ್ಲಿಸಿ: $("ಫಾರ್ಮ್").ಸಲ್ಲಿಸಿ(ಫಂಕ್ಷನ್(ಇ) (var formData = ಹೊಸ FormData($(ಇದು)); $.ajax((url: "file.php", ಪ್ರಕಾರ: "POST", ಡೇಟಾ: ಫಾರ್ಮ್‌ಡೇಟಾ, ಅಸಿಂಕ್: ತಪ್ಪು, ಯಶಸ್ಸು: ಫಂಕ್ಷನ್ (ಎಂಎಸ್‌ಜಿ) (ಅಲರ್ಟ್ (ಎಂಎಸ್‌ಜಿ); ), ದೋಷ: ಫಂಕ್ಷನ್ (ಎಂಎಸ್‌ಜಿ) (ಎಚ್ಚರಿಕೆ ("ದೋಷ!"); ), ಕ್ಯಾಷ್: ತಪ್ಪು, ವಿಷಯ ಪ್ರಕಾರ: ತಪ್ಪು, ಪ್ರಕ್ರಿಯೆ ಡೇಟಾ: ತಪ್ಪು e.preventDefault();

ಮೂಲ ಕೋಡ್ ಫೈಲ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ: