Artikel ini berbagi contoh unggahan multi-piktur JS HTML5 dan pratinjau untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Aplikasi utama
1. File HTML5 dapat memilih beberapa file dan mendapatkan beberapa informasi file
2. Objek XMLHTTPREQUEST, Kirim Permintaan Transmisi HTTP
3. Tempatkan setiap file dalam formdata untuk transmisi
4. Gunakan ReadAsDataurl untuk secara langsung mengubah konten gambar menjadi URL, letakkan di SRC tag IMG, dan hasilkan gambar yang dapat dipratinjau.
Kode HTML+CSS+JS
<! Doctype html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <iteme> tes html filereader </iteme> <style type = "text/css"> html, body, header, footer, div, ul, li, h1, h2, h3, h4, h5, h6, label, input, textarea, p, span, a {padding: 0; margin: 0;} img {border: 0;} em, kuat {font-weight: normal; font-style: normal;} ul {List-style: none;} h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 100%;} a, a: setelah {text-decoration: none;}. photo_wrap {clear: keduanya;}. photo_wrap li {margin: 10px; Lebar: 150px; float: left;}. photo_box {height: 150px; Lebar: 150px; meluap: tersembunyi; Posisi: relatif;}. Photo_box .img1 {Height: 150px;}. Photo_box .img2 {width: 150px;}. unggah_result {tinggi: 50px;}. btn {position: relatif; Tinggi: 40px; Lebar: 100px; float: left;}. btn {height: 40px; Line-Height: 40px; Warna: #fff; Tampilan: Blok; Border-Radius: 3px; Teks-Align: tengah; Latar Belakang-Color: #FF5581; / * Browser lama */ latar belakang-gambar: -moz-linear-gradient (atas, #fa7b9c 0%, #ff5581 100%); / * Ff3.6+ */ latar belakang-gambar: -webkit-gradient (linear, atas kiri, bawah bawah, color-stop (0%,#fa7b9c), color-stop (100%,#ff5581)); / * Chrome, safari4+ */ latar belakang-gambar: -webkit-linear-gradient (atas, #fa7b9c 0%, #ff5581 100%); / * Chrome10+, safari5.1+ */ latar belakang-gambar: -o-linear-gradient (atas, #fa7b9c 0%, #ff5581 100%); / * Opera 11.10+ */ latar belakang-gambar: -ms-linear-gradient (atas, #fa7b9c 0%, #ff5581 100%); / * IE10+ */ Latar Belakang-gambar: Linear-gradient (ke bawah, #FA7B9C 0%, #FF5581 100%); / * W3c */ filter: progid: dximagetransform.microsoft.gradient (startColorStr = '#fa7b9c', endcolorstr = '#ff5581', gradientType = 0); / * IE6-8 */ BOX-SHADOW: 0 1px 0 RGBA (255, 255, 255, 0.3) inset, 0 1px 2px rgba (0, 0, 0, 0.3);}. Btn_add_pic {lebar: 100px; Posisi: Absolute; TOP: 0; Kiri: 0;}. Btn_upload {width: 100px; margin: 0 10px 10px; float: left;}. btn: hover, .btn_cur {latar belakang-warna: #fb99b1; / * Browser lama */ latar belakang-gambar: -moz-linear-gradient (atas, #fb99b1 0%, #ff5581 100%); / * Ff3.6+ */ latar belakang-gambar: -webkit-gradient (linear, atas kiri, bawah dasar, color-stop (0%,#fb99b1), color-stop (100%, ## ff5581)); / * Chrome, safari4+ */ latar belakang-gambar: -webkit-linear-gradient (atas, #fb99b1 0%, #ff5581 100%); / * Chrome10+, safari5.1+ */ latar belakang-gambar: -o-linear-gradient (atas, #fb99b1 0%, #ff5581 100%); / * Opera 11.10+ */ latar belakang-gambar: -ms-linear-gradient (atas, #fb99b1 0%, #ff5581 100%); / * IE10+ */ Latar Belakang-gambar: linear-gradient (ke bawah, #fb99b1 0%, #ff5581 100%); / * W3c */ filter: progid: dximagetransform.microsoft.gradient (startColorStr = '#fb99b1', endcolorStr = '#ff5581', gradientType = 0); / * Ie6-8 */}. File_input_wrap {position: absolute; TOP: 0; Kiri: 0; Lebar: 100px; Tinggi: 40px;}. File_input_wrap Label {width: 100%; Tinggi: 100%; Tampilan: Blok; Opacity: 0; kursor: pointer;}. File_input_wrap input {opacity: 0; filter: alpha (opacity = 0);/*ie8 dan di bawah*/ posisi: absolute; Atas: 7px; Kanan: 173px; kursor: pointer; Lebar: 95px;}. Photo_box .icon_pos {Height: 20px; Lebar: 20px; Tampilan: Blok; Posisi: Absolute; Kanan: 0; Bawah: 0;}. Photo_box .Loading {Height: 10px; Tampilan: Blok; Posisi: Absolute; Kiri: 0; Bawah: 0; latar belakang-gambar: url (loading.gif);}. sucess_icon {latar belakang-gambar: url (icons_01.png); posisi latar belakang: 0 0;}. Error_icon {latar belakang-gambar: url (icons_01.png); Latar Belakang-Posisi: -20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javaScript:;"> Tambahkan gambar </a> <div> <input type = "file" id = "file" name = "File" Accept = "Image/Image/" Multiple OnChange = "File" Name "name =" File "/" Image/Image/Image/"Multiple OnChange =" File "name" this = "File" " id = "j_add_area"> </label> </div> </div> <a id = "j_upload" href = "javaScript:;"> Mulai unggah </a> <div id = "j_photo_wrap"> <ul> </ul> </Div> </body> <script type = "JAVAS"> </Ul> </Div> </body> <script = ”TEXT/JAVAS"> </ul> </div> </body> <script = ”TEXT/JAVAS"> src = "jQuery-1.7.2.min.js"> </script> <script type = "text/javascript"> var img_index = array baru (); function unggah_img () {var j = 0; img (); fungsi img () {// 1. Buat objek XMLHTTPREQUEST if (img_index.length> 0) {var singleimg = img_index [j]; var xmlhttp; if (window.xmlHttpRequest) {// ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttpRequest; // Perbaiki jika untuk versi spesifik tertentu dari bug browser mozillar (xmlhttp.overridemimetype) {xmlhttp.overridemimetype ('text/xml'); }; } else if (window.activexObject) {// ie6, ie5 xmlhttp = new ActivexObject ("microsoft.xmlhttp"); }; if (xmlhttp.upload) {// bilah progress xmlhttp.upload.addeventListener ("progress", function (e) {if (e.lengthcomputable) {var load_percent = (E.Loaded /e.total) * 100; $ ('#J_Photo_Wrapo Li '). EQ (J) .find ('. Loading '). CSS (' Width ', Load_percent+'%'); // 2. Fungsi Callback // OnReadyStateChange adalah fungsi pegangan acara yang dipanggil setiap kali properti ReadyState berubah xmlhttp.onreadystateChange = function (e) {if (xmlHtp.readystate == 4) {if (xmlhtp.status == 200) {var json = eval ('' ('' '' '' '' ('' '' '(' '' '' '(' xmlhtp.status == 200) if (json.status == 1) {$ ('#j_photo_wrap ul li'). eq (j) .find ('. unggah_result'). Teks (singleimg.name+'unggah selesai'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Memuat'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('sucess_icon'); } else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. unggah_result'). Teks (singleimg.name+'unggah gagal'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Memuat'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('error_icon'); }} else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. unggah_result'). Teks (singleimg.name+'unggah gagal'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Memuat'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Memuat'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('error_icon'); } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Tetapkan informasi koneksi // inisialisasi parameter permintaan HTTP, tetapi jangan mengirim permintaan. // Metode koneksi parameter pertama adalah, yang kedua adalah alamat URL, dan true ketiga adalah koneksi asinkron, yang asinkron dengan default // kirim data menggunakan metode post xmlhttp.open ("post", "unggah.php", true); // 4. Kirim data, mulailah berinteraksi dengan server // kirim permintaan http, gunakan parameter yang diteruskan ke metode open (), dan permintaan opsional yang diteruskan ke metode tersebut. Jika benar, kalimat yang dikirim akan dieksekusi segera // jika salah (sinkron), Kirim akan dieksekusi hanya setelah data server kembali // Metode GET tidak memerlukan konten dalam mengirim var formdata = formdata baru (); formdata.append ("filedata", singleimg); xmlhttp.send (formdata); } //}}}}; $ ('#J_upload'). Klik (function () {unggah_img ();}); $ ('#J_add_area'). Hover (function () {$ ('#j_add_pic'). AddClass ('btn_cur');}, function () {$ ('#j_add_pic'). Removeclass ('btn_cur');}); $ ('#J_add_area'). Klik (fungsi () {$ ('#file'). Klik ();}); fungsi mengubah ukuran (img) {if (img.offsetHeight> img.offsetWidth) {$ (img) .removeclass ('img1'). addClass ('img2'); } else {$ (img) .removeclass ('img2'). addClass ('img1'); }} fungsi fileInfo (sumber) {var ireg = /image//.*/i; var file = source.files; nama var, ukuran, jenis; untuk (var i = 0, f; f = file [i]; i ++) {name = f.name; size = f.Size; type = f.type; if (! type.match (IREG)) {$ ('#j_photo_wrap ul'). append ('<li> <div>'+name+'bukan gambar <span> </span> <span> </span> </div> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('#j_photo_wrap ul'). append ('<li> <li>'+name+'terlalu besar untuk menghasilkan pratinjau <span> </span> <span> </span> </div> <div> </div> </li>'); } else {if (window.filereader) {var fr = new filereader (); fr.onload = (function (f) {return function (e) {$ ('#j_photo_wrap ul'). append ('<li> <vv> <img onload = "ubah ukuran (this);" src = "+this.result+'"/> <pan> </span> <span> </span> </span>; fr.readasdataurl (f); }}}}}}}; </script> </html>PHP menerima kode file (di sini hanya mendapatkan nama file, jenis, dan ukuran, dan tidak ada operasi lain yang dilakukan)
<? php $ name = $ _files ['fileData'] ['name']; $ type = $ _files ['FileData'] ['type']; $ size = $ _files ['FileData'] ['size']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "status" => 1); $ return = json_encode ($ return); echo $ return;?>Masalah yang ada
1. Untuk menghasilkan thumbnail, ReadAsDataurl akan mengambil memori saat membaca konten file, sehingga gambar besar akan menyebabkan browser macet atau macet.
2. Mengunggah tidak diproses dalam segmentasi
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.