Paano mag-upload ng anumang mga file, tulad ng mga larawan, sa server gamit ang AJAX at jQuery? Ito ay medyo madaling gawin! At sa ibaba ay susuriin namin ang lahat nang detalyado.
Sa mga "sinaunang" panahon, kapag wala pang jQuery, o marahil ay mayroon pa, ngunit ang mga browser ay hindi masyadong sopistikado, ang pag-upload ng file sa isang site gamit ang AJAX ay isang nakakapagod na gawain: sa pamamagitan ng lahat ng uri ng saklay tulad ng mga iframe. Hindi ko naabutan ang oras na iyon, at sino ang nagmamalasakit ngayon? Ngunit ngayon ay may iba pang kawili-wili - na ang pag-save ng mga file sa site ay napakasimple. Kahit na ang isang webmaster na walang karanasan at pag-unawa sa kung paano gumagana ang AJAX ay magagawang mabilis na malaman kung ano ang nangyayari. At ang artikulong ito ay makakatulong sa kanya. Kung i-back up mo ang mga kakayahan na ito sa mga pag-andar ng WordPress, ang ligtas na pagproseso at pag-upload ng mga file sa server ay magiging isang ganap na walang halaga at kahit na kawili-wiling gawain (para sa isang halimbawa sa WordPress, tingnan ang dulo ng artikulo).
Gayunpaman, gaano man kasimple ang lahat, dapat tandaan na ang kaunting karanasan sa pagtatrabaho sa mga file at pangunahing kaalaman sa Javascript, kailangan pa rin ang jQuery at PHP! Sa pinakamababa, kailangan mong isipin kung paano na-upload ang mga file sa server, tulad ng sa pangkalahatang balangkas Gumagana ang AJAX at kailangan mong mabasa at maunawaan ang code kahit kaunti.
Ang pamamaraan na inilarawan sa ibaba ay medyo matatag, at mahalagang umaasa sa object ng JavaScript new FormData() , na mayroong pangunahing suporta sa lahat ng browser.
Para sa isang mas maliwanag na pang-unawa sa materyal, nahahati ito sa mga hakbang. Yun lang, lumipad na tayo...
AJAX File Upload: Pangkalahatang HalimbawaNagsisimula ang lahat sa pagkakaroon sa site mga patlang ng input uri ng file. Hindi na kailangang maging bahagi ng form (tag) ang field na ito.
Kaya, mayroon kaming HTML code na may isang field ng file at isang button na "Mag-upload ng Mga File".
Mag-upload ng mga file
Hakbang 1. Data mula sa field ng fileAng unang hakbang ay ang pagkuha ng data ng mga na-download na file.
Kapag nag-click ka sa field ng file, lilitaw ang isang window para sa pagpili ng mga file Pagkatapos ng pagpili, ang data tungkol sa mga ito ay nai-save sa input field, at kailangan naming "kunin ito" mula doon. Upang gawin ito, mag-a-attach kami ng function sa pagbabago ng JS event na magse-save ng kasalukuyang file field data sa JS variable file:
Var file; // variable. ay maglalaman ng data ng file // punan ang variable ng data kapag nagbago ang halaga ng patlang ng file $("input").on("change", function())( files = this.files; ));
Hakbang 2. Lumikha ng kahilingan sa AJAX (sa pamamagitan ng pag-click)Mayroon kaming data ng file, ngayon kailangan naming ipadala ito sa pamamagitan ng AJAX. Itinalaga namin ang kaganapang ito sa isang pag-click sa button na "Mag-upload ng mga file".
Sa sandali ng pag-click ay lumilikha kami bagong bagay bagong formData() at magdagdag ng data mula sa variable ng mga file dito. Gamit ang formData() titiyakin namin na ang isinumiteng data ay parang isinumite lang namin ang form sa browser.
Para maganap ang naturang kahilingan, kailangan mong tukuyin ang mga karagdagang parameter sa jQuery Mga parameter ng AJAX, Kaya naman pamilyar na function$.post() ay hindi angkop at gumagamit kami ng mas nababaluktot na analogue: $.ajax() .
Dalawang importante karagdagang mga parameter kailangang itakda sa false:
ProcessData Hindi pinapagana ang pagproseso ng ipinadalang data. Bilang default, halimbawa, para sa GET mga kahilingan Kinokolekta ng jQuery ang data sa isang string ng query at idinadagdag ang string na iyon sa dulo ng URL. Para sa POST data gumagawa ng iba pang pagbabago. Ang anumang mga pagbabago sa pinagmulan ng data ay makakasagabal sa amin, kaya hindi namin pinagana ang opsyong ito... contentType Disables ang pagtatakda ng header ng uri ng kahilingan. Default pag-install ng jQuery ay katumbas ng "application/x-www-form-urlencoded". ay magpapakita ng babala "Nawawalang hangganan sa multipart/form -data"... Sa pangkalahatan, ang pinakamadaling paraan ay i-disable ang opsyong ito, pagkatapos ay gumagana ang lahat // pagpoproseso at! Nagpapadala ng AJAX humiling kapag nag-click ka sa button na upload_files $(".upload_files").on("click", function(event)( event.stopPropagation(); // pagpapahinto sa lahat ng kasalukuyang event ng JS event.preventDefault(); // pagpapahinto sa default na kaganapan para sa kasalukuyang elemento - i-click para sa tag // do nothing if files is empty if(typeof files == "undefined") return;
"; )) $(".ajax-reply").html(html); ) // error else ( console.log("ERROR: " + respond.error); ) ), // error sa function ng error sa pagtugon ng server: function(jqXHR, status, errorThrown)( console.log("AJAX request ERROR: " + status, jqXHR); ) ));
Ngayon ang huling hakbang: kailangan mong iproseso ang ipinadalang kahilingan.
Upang gawing mas malinaw, ipoproseso namin ang kahilingan nang wala karagdagang mga tseke para sa mga file, i.e. i-save lamang ang natanggap na mga file sa ang gustong folder. Bagaman, para sa seguridad, ang mga ipinadalang file ay dapat suriin, hindi bababa sa extension ng file (uri)...
Gumawa tayo ng submit.php file na may sumusunod na code (pinapalagay na ang submit.php ay nasa parehong folder ng file kung saan ipinadala ang kahilingan ng AJAX):
jQuery(document).ready(function($)( // link sa file AJAX handler var ajaxurl = ""; var nonce = ""; var files; // variable. ay maglalaman ng data ng file // punan ang variable ng data kapag binago ang mga halaga ng field na file $("input").on("change", function())( files = this.files; )); upload_files").on ("click", function(event)( event.stopPropagation(); // pagpapahinto sa lahat ng kasalukuyang JS event event.preventDefault(); // pagpapahinto sa default na event para sa kasalukuyang elemento - click para sa tag // do nothing if files is empty if(typeof files == "undefined") return;
// lumikha ng data ng file sa isang format na angkop para sa pagpapadala ng var data = new FormData();
$.each(mga file, function(key, value)( data.append(key, value); ));
// add a request identifier variable data.append("action", "ajax_fileload");
data.append("nonce", nonce);
data.append("post_id", $("body").attr("class").match(/postid-(+)/));
},
var $reply = $(".ajax-reply");
});
});
// AJAX request $reply.text("Naglo-load...");
$.ajax(( url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // huwag paganahin ang pagpoproseso ng ipinadalang data, hayaan itong maipadala tulad ng processData: false, // i-disable pagtatakda ng uri ng kahilingan sa header. Kaya't sasabihin ng jQuery sa server na ito ay isang string request contentType: false, // function ng matagumpay na server response success: function(respond, status, jqXHR)( // OK if(respond.success) ( $.each(respond.data, function) (key, val)( $reply.append(""); )) // error else ($reply.text("ERROR: " + respond.error); ) ) , // error sa pag-andar ng error sa tugon ng server: function(jqXHR, status, errorThrown)( $reply.text("AJAX request ERROR: " + status); ) ));
)); ))$(function() ("uploader " передаётся скрипт-обработчик. Теперь сам код этого обработчика:!}
$("#file_upload").uploadify((
"formData" :( "timestamp" : "","token" : ""
"uploader" : "uploadify.php"
At malamang na hindi lahat ay nagawa ito. Sa katunayan, ang lahat ay hindi kasing hirap ng tila.
SA ang araling ito Ilalarawan ko ang proseso ng pag-upload ng file sa server (hosting).
Ang teknolohiyang Ajax ay ginagamit upang makipagpalitan ng data sa pagitan ng browser at ng web server.
JQuery na bersyon na ginamit sa recipe: 2.2.2.
Lumilikha kami ng primitive markup mula sa html tag, ulo at katawan.
SA tag ng ulo kailangan mong tukuyin ang landas sa jquery library.
Sa halimbawa na gumagamit ako ng jquery mula sa google server.
Sa body tag gumawa kami ng form na binubuo ng input tag at button.
Gamit ang input type="file" pipili ka ng file na ilo-load.
Ang button na tag ay kinakailangan upang patakbuhin ang js code upang ilipat ang file.
Itinakda namin ang form name="uploader", enctype="multipart/form-data", method="POST".
Pangalan ng form: name="uploader"
Paraan ng pag-encode ng form ng data: enctype="multipart/form-data"
Paraan ng paglilipat ng data: method="POST"
Isumite ang file na ito: I-upload
Lahat ng html at js markup code:
Isumite ang file na ito: I-upload
Lumipat tayo sa java script code.
Upang maglipat ng file, dapat mong ilipat ang buong form:
$("form").submit(function(e) (
Binabasa namin ang data ng form sa isang variable:
var formData = bagong FormData($(this));
Susunod, gumagamit kami ng teknolohiya ng ajax upang maglipat ng data sa web server.
Kung matagumpay ang paglilipat ng file, may ipapakitang mensahe sa isang pop-up window.
Kung ang isang error ay nangyari o ang file ay nawawala, ang isang mensahe ay ipapakita kasama ng teksto ng problema na lumitaw.
$.ajax(( url: "file.php", type: "POST", data: formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert( "Error!"); cache: false, contentType: false, processData: false ));
Ang lahat ng code ay nasa java script na may gamit ang jquery:
Ngayon ang natitira na lang ay ang server-side code upang makatanggap ng data mula sa form Paraan ng POST kahilingan.
Nakukuha namin direktoryo ng ugat site at magtalaga ng folder para sa pag-download ng mga file:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;
Binabasa ang na-download na file:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["name"]);
Sinusuri kung na-load ang file.
Alinsunod sa papasok na data, nagtatalaga kami ng kasamang mensahe.
Kung hindi na-upload ang file, i-upload ito sa direktoryo na tinukoy sa $uploadfile:
if (move_uploaded_file ($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "Tama ang file at matagumpay na na-upload.\n"; ) else ($out = "Posibleng pag-atake sa pag-upload ng file !\n";)
Kapag nag-execute mga tinukoy na aksyon ibinalik ang tugon.
Lahat ng code sa php:
Lahat html code kasama ang js:
Isumite ang file na ito: Mag-upload ng $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", data: formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert("Error!"); ), cache: false, contentType: false, processData: false )); e.preventDefault();
I-download ang source code file:
