HTML5 FormData Metode Pendahuluan dan file implementasi pada file implementasi

XMLHTTPREQUEST adalah antarmuka browser. XMLHTTPREQUEST adalah cara yang umum digunakan untuk berinteraksi data di browser ini. Pada bulan Februari 2008, XMLHTTPREQUEST Level 2 diusulkan. bahwa Anda dapat mengunggah file biner. Mari kita perkenalkan cara mengunggah file dengan formdata.

Pertama -tama lihat cara dasar FormData: objek formdata, Anda dapat membentuk querystring dari semua elemen dan nilai tabel dan mengirimkannya ke latar belakang. Lewati saja formulir sebagai parameter ke dalam konstruktor formdata:

 var form = document.getElementById (form1);

Dengan cara ini, FD dapat dikirim langsung melalui metode Ajax Send () ke latar belakang.

Formulir berikut dibuat. Selain data biasa dalam formulir, ada pengunggahan file.

 <Form Name = Form1 id = Form1> <p> Nama: <Input Tipe = Nama Teks = Nama /> <p> Jenis Kelamin: <Input Tipe = Nama Radio = Nilai Gender = 1 /> Jenis <Input Tipe = Nama Radio = Nilai gender = 2 /p> wanita </p> <p> Stu-number: <input type = name teks = angka /> </p> <p> Foto: <Input Type = File Name = Foto ID = Foto> </p> <p> <input type = nama tombol = B1 value = Kirim OnClick = fsubmit ()/p> </form> <Div ID = hasil> </div>

Kode di atas membuat formulir, cukup isi beberapa informasi, dan pilih gambar sebagai avatar, atur div untuk menyimpan hasil pengembalian.

Sebagai sederhana, kami masih menggunakan AJAX yang dienkapsulasi oleh jQuery untuk mentransfer data ke latar belakang:

 Function fsubmit () {var form = document.geteLementById (form1); Tell JQuery Don't Proses The Sending Data ContentType: False, // Tell JQuery untuk tidak mengatur permintaan HEAD tipe konten: Function (Response, Status, XHR) {Console.log (XHR); ejson (respons); var result = ''; + JSON ['Number']; .html (hasil);}});

Server.php dalam kode di atas adalah file server, menerima permintaan AJAX, dan mengembalikan hasil penerima.

 <? ISSET ($ _ POST ['NOMOR'])? ['name'] = $ name; '] = false;} echo json_encode ($ response);?>

Setelah mengisi informasi, klik Kirim untuk mendapatkan efek berikut pada halaman.

Jika Anda adalah penggemar JavaScript asli, tentu saja, fungsi di atas dapat dicapai.

 Function fsubmit () {var form = document.geteLementById (form1); (olq. ReadyState == 4) {if (oreq.status == 200) {console.log (typeof oreq.responsetext); Informasi Pribadi: <br/> Nama:+json ['name']+<br/> gender:+json ['gender']+<br/> nomor:+json ['nomor']; << BR /> Avatar: <img src = ' + json [' photo '] +' height = 50 style = border-radius: 50%; POST, SERVER.PHP);

Selain objek baru di atas formdata, formulir langsung diteruskan ke parameter, dan ada fungsi lain. Sebagian besar artikel yang diperkenalkan oleh FormData di Internet hanya menyebutkan metode Apend (). Jadi apa metode objek Formdata? Mari kita tahu:

Setelah konsol, kami memiliki penemuan besar.

Metode append () digunakan untuk menambahkan nilai kunci ke objek FormData:

 fd.append ('key1', value1);

FD adalah objek FormData, yang dapat dibangun baru.

Atur nilai kunci kunci yang sesuai

 fd.set ('key1', value1);

Ini terlihat sedikit mirip dengan metode append (). Masih membandingkan melalui contoh, kita didasarkan pada bentuk di depan formulir.

 fd.append ('name', will);

Dua kunci adalah nilai kunci nama:

 fd.set ('name', will);

Hanya satu kunci adalah nilai kunci nama:

Di atas adalah perbedaan antara append () dan set (). Jika set nilai yang ditetapkan tidak ada, efek keduanya adalah sama.

Menerima parameter, menunjukkan bahwa nama nilai kunci yang ingin Anda hapus, jika ada beberapa nilai kunci yang sama, itu akan menghapusnya:

 fd.append ('name', 'will');

Informasi nama dalam bentuk dan informasi nama yang baru ditambahkan melalui append () telah dihapus.

Terima parameter untuk menunjukkan nama kunci yang perlu Anda temukan, dan mengembalikan nilai nilai pertama dari kunci pertama. Jika ada beberapa kunci yang sama, dan mengembalikan semua nilai nilai yang sesuai dari kunci ini.

Berdasarkan formulir di atas:

 fd.append ('name', 'Will');

 fd.append ('name', 'will');

Metode ini juga menerima parameter, yang juga merupakan nama kunci, mengembalikan nilai boolean untuk menentukan apakah objek FormData berisi kunci. Bentuk di atas adalah contoh:

 console.log (fd.has ('name'));

Metode ini tidak perlu menerima parameter, dan mengembalikan iterator. Bentuk di atas adalah contoh:

 untuk (tombol var fd.keys ()) {console.log (key);}

Hasilnya adalah:

nama

jenis kelamin

nomor

Foto

Dengan iteratif kunci, tentu saja, sangat diperlukan untuk melintasi nilai iterator. Values ​​() adalah iterator nilai.

 untuk (nilai var fd.values ​​()) {console.log (value);}

hasil:

Ada iterator yang melintasi kunci, dan ada juga iterator nilai, mengapa tidak terlibat dalam dua bersama! Entri () adalah mengembalikan iterator yang berisi pasangan nilai kunci:

 untuk (var pasangan fd.entries ()) {console.log (pair [0]+ ','+ pair [1]);}

hasil:

Karena Formdata adalah antarmuka baru dari XMLHTTPREQUEST Level 2, peramban IE yang sekarang lebih rendah dari IE10 tidak mendukung FormData. gambar di bawah ini:

Di atas adalah semua isi artikel ini.