Apakah itu PHP atau skrip sisi server lainnya, mereka menyediakan fungsi pengunggahan file, yang relatif mudah diimplementasikan. Menggunakan JavaScript untuk bekerja sama, unggah file AJAX dapat direalisasikan. Meskipun jQuery sendiri tidak menyediakan fungsi yang disederhanakan seperti itu, ada banyak plug-in yang dapat diimplementasikan. Di antara mereka, AjaxfileUpload.js yang disediakan oleh Phpletter.com adalah plug-in ringan, dan metode penulisan sangat mirip dengan metode global $ .post () yang disediakan oleh jQuery, dan sederhana dan mudah digunakan.
Namun, plug-in ini terlalu disederhanakan. Selain menyediakan jalur untuk mengunggah file, itu tidak dapat memberikan nilai tambahan ke server latar belakang. Jadi, saya memodifikasi skrip dan menambahkan parameter objek data.
1. Prinsip
Saya menggunakan PHP sebagai skrip sisi server di sini. Hampir setiap buku dengan lebih sedikit PHP akan menyebutkan cara menggunakan metode move_uploaded_file () untuk mengunggah file, saya tidak akan masuk ke detail di sini. Yang ingin saya katakan adalah menggunakan prinsip unggahan Ajax.
Karena saya telah menggunakan pustaka jQuery, ketika saya memikirkan Ajax, reaksi pertama saya adalah mencoba metode $ .post (), gunakan setiap pemilih untuk mendapatkan nilai nilai di kotak file file, dan kemudian mengirimkannya ke server latar belakang. Tentu saja, ternyata ini tidak mungkin. (Karena masalah ini, saya juga telah memeriksa banyak informasi dan menyediakan banyak skrip seperti ASP di internet. Saya benar -benar tidak tahu harus berkata apa.)
Kembali ke topik, sebenarnya tidak sulit untuk mengunggah Ajax, dan ada banyak metode. Plugin AjaxfileUpload.js untuk Phpletter.com yang disebutkan dalam artikel ini adalah cara untuk menggunakan iframes. Ini juga merupakan metode umum saat mengunggah tanpa menyegarkan halaman tanpa menggunakan skrip JavaScript. (Metode ini digunakan untuk menulis log di latar belakang bo-blog blog ini)
Plug-in Ajaxfileupload.js juga sangat sederhana. Pertama -tama menggunakan pemilih jQuery untuk mendapatkan nilai jalur file di kotak unggahan file, kemudian secara dinamis membuat iframe, dan membuat kotak file file baru di dalamnya, menyediakan metode pos untuk mengirimkannya ke latar belakang. Akhirnya, kembali ke hasil ke meja depan.
2. Gunakan
Penggunaan plugin Ajaxfileupload.js sangat sederhana.
Kode html meja depan serupa:
<type script = "Text/JavaScript"> $ (#buttonuplod) .click (function () {$ .AjaxFileUpload ({url: 'doAjaxfileupload.php', // server di mana Anda menangani file unggah: false, false, // nilai id yang sesuai dengan file di halaman dalam proses ini. Tipe Data: Teks, XML, JSON, HTML, SCRITP, JSONP Lima Sukses: Fungsi (Data) {Alert (data.file_infor); AJAXFILEUPLOAD (); "> Unggah </button>Latar belakang DoAjaxFileUpload.php Script:
<? php $ upfilePath = "../attachment/";$ok=@move_uploaded_file($_files media'img' versiadmp_name'$,$upfilePath); if ($ ok === false) {echo json_encode ('file_infor' => 'unggah gagal'); } else {echo json_encode ('file_infor' => 'diunggah dengan sukses'); }?>Untuk pengujian, Anda dapat menyimpan nilai variabel yang diteruskan dengan cara yang sama dengan yang berikut:
$ file_info = var_export ($ _ file, true);
$ ok = file_put_contents ("../ lampiran/file_info.txt", $ file_info);
if ($ ok) keluar (json_encode ('file_infor' => 'diunggah dengan sukses'));
keluar (json_encode ('file_infor' => 'unggah gagal'));
※ Melihat
Harap perhatikan tanda di kotak file kode HTML:
1. ID = 'IMG' digunakan untuk mengidentifikasi fileElementID: 'img' dari plugin Ajaxfileupload.js. Pemilih jQuery akan menggunakan string ini untuk mendapatkan nilai kotak teks;
2. name = 'img' digunakan untuk membaca data file yang diunggah melalui $ _files ['img'] saat mengirimkannya ke skrip latar belakang melalui posting. Jika nilai ini tidak tersedia, variabel $ _files kosong;
Oleh karena itu, kedua nilai ini sangat diperlukan dan tidak dapat disamakan.
3. Dukung parameter tambahan
Terkadang, kita perlu menangani file yang diunggah berdasarkan variabel tertentu di latar belakang. Misalnya, perbarui file. Pada saat ini, Anda perlu melewati beberapa parameter tambahan ke tahap yang sama. Jadi, saya memodifikasi plugin Ajaxfileupload.js:
addotherRequestStoform: function (form, data) {// Tambahkan parameter ekstra var originalElement = $ ('<input type = "hidden" name = "" value = "">'); untuk (tombol var dalam data) {name = key; value = data [key]; var cloneElement = originalElement.clone (); cloneelement.attr ({'name': name, 'value': value}); $ (cloneElement). lampai (form); } return form;}, ajaxfileUpload: function {// todo memperkenalkan pengaturan global, memungkinkan klien untuk memodifikasinya untuk semua permintaan, tidak hanya waktu tunggu s = jQuery.extend ({}, jQuery.Ajaxsettings, s); var id = new date (). getTime () var form = jQuery.CreateUploadForm (id, s.fileElementId); if (s.data) form = jQuery.addotherRequestStoform (form, s.data); var io = jQuery.createuploadiframe (id, s.secureuri);Bagian tanda merah adalah apa yang saya tambahkan. Dengan cara ini saya dapat melewati parameter tambahan di bagian html latar depan melalui kode seperti di bawah ini:
URL: 'DoAjaxFileupload.php', // Server tempat Anda menangani file mengunggah
Secureuri: False, // Nilai ID yang sesuai dengan file dalam kode pemrosesan halaman
Data: {'test': 'test', 'ok': 'ok'}, // disahkan dalam suatu objek, dan bagian konten dapat memasukkan nilai variabel JavaScript
FileElementId: 'img',
Script pemrosesan latar belakang adalah:
array_push ($ _ file, $ _ permintaan); $ file_info = var_export ($ _ file, true); $ ok = file_put_contents ("../ lampiran/file_info.txt", $ file_info); if ($ ok) Exit (json_encode ('file_infor' => if ($ oke) keluar (json_encode ('file_infor' => 'unggah gagal'));Dapat dilihat bahwa prinsipnya sangat sederhana, yaitu untuk menambahkan konten objek data tambahan ke formulir di bawah iframe, lewati ke latar belakang skrip PHP, dan dapatkan nilai -nilai ini dengan variabel seperti $ _Request.
Konten file_info.txt yang disimpan di output latar belakang adalah sebagai berikut:
array (
'file' =>
array (
'name' => 'firefox-java.txt',
'ketik' => 'teks/polos',
'tmp_name' => 'd: //tools//xampp//tmp//phped45.tmp',
'Kesalahan' => 0,
'size' => 250,
),
0 =>
array (
'tes' => 'tes',
'ok' => 'ok',
'Phpsessid' => 'e379fd4fb2abca6e802a1302805a5535',
),
)
Ajaxfileupload.js:
jQuery.extend ({createuploadiframe: function (id, uri) {// Buat frameid frameid = 'JUPLOADFRAME' + id; if (window.activexObject) {var io = document.createElement ('<iframe id = "' + frameid + '" name = "' + frameid + '" /iframe = ") (tipe uRi = uo =" " +" "" iframe = "" iframe uo = " 'boolean') {io.src = 'javaScript: false';} else if (typeof uri == 'string') {io.src = uri;}} else {var io = document.createElement ('iframe'); io.id = frameid; io.name = frameid; 'Absolute'; io.style.top = '-1000px'; io.style.left = '-1000px' Tindakan = "Metode =" POST "NAME =" ' + Formid +' "ID =" ' + Formid +' "Enctype =" Multipart/Form-Data "> </form> '); $ (OldElement) .Appendto (Form); $ (form) .css ('atas', '-1200px'); $ (form) .css ('kiri', '-1200px'); $ (form) .Appendto ('Body'); formulir pengembalian; }, addotherRequestStoform: function (form, data) {// Tambahkan parameter tambahan var inti asli = $ ('<input type = "hidden" name = "" value = "">'); untuk (tombol var dalam data) {name = key; value = data [key]; var cloneelement = originalElement.clone (); cloneelement.attr ({'name': name, 'value': value}); $ (cloneElement). lampai (form); } formulir pengembalian; }, AjaxfileUpload: function {// todo memperkenalkan pengaturan global, memungkinkan klien untuk memodifikasinya untuk semua permintaan, tidak hanya batas waktu s = jQuery.extend ({}, jQuery.AJAXSettings, s); var id = new date (). getTime () var form = jQuery.CreateUploadForm (id, s.fileElementId); if (s.data) form = jQuery.addotherRequestStoform (form, s.data); var io = jQuery.createuploadiframe (id, s.secureuri); var frameid = 'JUploadFrame' + id; var formid = 'JUPLOADFORM' + ID; // Saksikan serangkaian permintaan baru jika (s.global &&! JQuery.active ++) {jQuery.event.trigger ("ajaxStart"); } var requestDone = false; // Buat objek permintaan var xml = {} if (s.global) jQuery.event.trigger ("Ajaxsend", [xml, s]); // Tunggu respons untuk kembali var unggahcallback = function (isTimeout) {var io = document.getElementById (frameId); coba {if (io.contentwindow) {xml.contentext = io.contentwindow.document.body? xml.responsexml = io.contentwindow.document.xmldocument? io.contentwindow.document.xmldocument: io.contentwindow.document; } else if (io.contentDocument) {xml.Responsetext = io.contentDocument.document.body? io.contentdocument.document.body.innerhtml: null; xml.responsexml = io.contentdocument.document.xmldocument? io.contentdocument.document.xmldocument: io.contentdocument.document; }} catch (e) {jQuery.handleError (s, xml, null, e); } if (xml || isTimeout == "timeout") {requestDone = true; status var; coba {status = isTimeout! = "timeout"? "Sukses": "error"; // Pastikan bahwa permintaan berhasil atau tidak dimodifikasi (status! = "error") {// memproses data (menjalankan XML melalui httpdata terlepas dari callback) var data = jQuery.uploadHttpData (xml, s.datatePe); // Jika panggilan balik lokal ditentukan, menembakkannya dan lulus dataf (s.success) s.success (data, status); // menembakkan callbackif global (s.global) jQuery.event.trigger ("status auxsuccess", [xml, s]);} elshquery. "Kesalahan"; jQuery.handleError (S, xml, status, e);} // Permintaan itu lengkap (s.global) jQuery.event.trigger ("AjaxComplete", [xml, s]); // Tangani AJAX Counterif global (S.Global &&! --Jquery.active) jQuery.event.trigger ("Ajaxstop"); // Hasil proses (s. jQuery (io) .unbind () setTimeout (function () {try {$ (io) .remove (); $ (form) .remove ();} catch (e) {jQuery.handleError (s, xml, null, e);}}, 100) xml = null}} / null, e); {setTimeOut (function () {// Periksa untuk melihat apakah permintaan masih terjadi pada (! requestDone) uploadCallback ("timeout");}, s.timeout); } coba {// var io = $ ('#' + frameId); var form = $ ('#' + formid); $ (form) .attr ('aksi', s.url); $ (form) .attr ('metode', 'pos'); $ (form) .attr ('target', frameid); if (form.encoding) {form.encoding = 'multipart/form-data'; } else {form.strype = 'multipart/form-data';} $ (form) .submit (); } catch (e) {jQuery.handleError (s, xml, null, e); } if (window.attachevent) {document.geteLementById (frameId) .attachevent ('onload', unggahcallback); } else {document.getElementById (frameId) .addeventListener ('load', unggahcallback, false); } return {abort: function () {}}; }, unggahHttpdata: function (r, type) {var data =! type; data = type == "xml" || data? R.Responsexml: R.Responsetext; // Jika jenisnya adalah "skrip", evaluasi dalam konteks global jika (type == "skrip") jQuery.globaleval (data); // Dapatkan objek JavaScript, jika JSON digunakan. if (type == "json") eval ("data =" + data); // evaluasi skrip dalam html if (type == "html") jQuery ("<div>"). html (data) .evalscripts (); // alert ($ ('param', data) .each (function () {alert ($ (this) .attr ('value'));})); pengembalian data; }})