Proyek pertama akhirnya diluncurkan. Ini adalah platform crowdfunding kesejahteraan publik yang disebut Qinqingchou. Sebagian besar antarmuka WeChat, komputer dan backend telah selesai oleh saya. Setelah beberapa bulan, saya merasa telah banyak mendapatkan dan saya pikir saya perlu meringkasnya.
Hal pertama yang terlintas dalam pikiran adalah masalah mengunggah gambar. Ketika data formulir biasanya diunggah oleh Ajax, rasanya bodoh menggunakan formulir formulir untuk mengunggah gambar. Kemudian pada waktu itu saya tidak berpikir untuk menggunakan plugin bentuk jQuery.
Solusi yang diberikan oleh seorang kolega di latar belakang adalah menulis formulir dalam iframe, dan kemudian mengunggah gambar dan mengirimkan formulir secara otomatis. Dia akan melompat ke alamat gambar di server ke URL halaman, dan saya akan mencegatnya.
Solusi 1: Formulir IFRame+Formulir
<Form Action = "/User/unggahanIDCard.do" enctype = "multipart/form-data" method = "POST"> <input type = "file" id = "unggah" nama = "file"> <label untuk = "unggah" id = "filebtn">+<img src = ""/"/</label unggah> <input =" TEXT = "TEPPAD"/TEPPAT "/TEXT ="/TEXTL "TOPLED"/TEXTL "TOPLED/TEXT =" $ (". TurnUrl"). Val (window.location.pathname); $ ("#unggah"). on ('ubah', fungsi (event) {event.preventDefault (); $ ("form"). Kirim ();});Perkenalkan iframe di antarmuka di mana gambar perlu diunggah, hubungi metode iframe di perpustakaan umum, dapatkan URL gambar dan tampilkan gambar di iframe
// Ekstrak jalur dalam fungsi iframe iframe (el) {var baseurl = ""; kode var, filepath; var place = $ (el) [0] .contentWindow.location.search; console.log (place); if (place) {code = place.match (/code =/d+/) [0]. /Substr) {code = place.match (/code =/d+/) [0] .substr) {Place. {filepath = place.match (/filepath =/s+/) [0] .substr (9);} $ (el) .contents (). find (". Tip"). css ('color', 'd0021b'); console.log (filePath); switch (kode) {case "200". berhasil '); $ (el) .contents (). find (". Tip"). css (' color ','#55a012 '); $ (el) .contents (). find ("#fileBtn> img"). Tampilkan (). ATTR ("SRC", Baseurl + "/" + FilePath); return/" "206": $ (el) .contents (). Find (". Tip"). Text ('File terlalu besar'); break; case "207": $ (el) .contents (). Find (". Tip"). Teks ('Tipe file'); break; case "208": $ (el) .contents (). Temukan (".Solusi 2: Kemudian saya menemukan bahwa ada dua masalah dengan pendekatan ini. Salah satunya adalah bahwa gambar yang dikirim oleh pengguna terlalu besar dan latar belakang tidak mengompresnya (rekan -rekan di latar belakang terlalu sibuk. Untuk mengakomodasi mereka, kami memang mengompresnya di ujung depan).
Yang kedua adalah bahwa setelah pengunggahan gambar berhasil, gambar akan ditampilkan pada iframe, yang membutuhkan waktu reaksi tertentu. Terkadang pengguna akan melaporkan bahwa gambar tidak dapat diunggah, tetapi sebenarnya hanya latar belakang yang belum kembali ...
Jadi saya memutuskan untuk mengunggahnya ke latar belakang menggunakan base64
<input type="file" id="uploadPic" name="file"><label for="uploadPic" id="fileBtn">+<img src="" /></label><span>Please upload the image, the size is within 2M<br/>(The image type can be jpg,jepg,png,gif,bmp)<br/>Recommended image ratio is 640*400 </span> <input type = "text" name = "turnUrl"> <canvas id = "unggah" style = "display: none"> </canvas>
Strukturnya mirip dengan yang asli, tetapi ada kanvas tambahan
$ ("#unggah"). on ('ubah', fungsi (event) {event.preventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) {waspada ("silakan unggah lebih sedikit dari 2 m (file. (!/Image /// W+/. Test (File.Type)) {waspada ("File harus menjadi gambar!"); return false;} var reader = new filereader (); reader.readasDataurl (file); reader.onload = function (e) {createCanvas (this.result);}}} {e) {createCanvas (this.Result); function {{this.result); document.getElementById("uploadImg");var cxt = canvas.getContext('2d');canvas.width = 640;canvas.height = 400;var img = new Image();img.src = src;img.onload = function() {// var w=img.width;// var h=img.height;// canvas.width = w; // canvas.height = h; cxt.drawimage (img, 0, 0,640.400); // cxt.drawimage (img, 0, 0); $ (". {ATRAX (). "/front/uploadbasbase64.do",type:" Post ", data: {" imgstr ": canvas.todataurl (" gambar/jpeg ", 0.9) .split (',') [1]}, Success: function (data) {console.log (data); $ (". " data.url);}});}}1. Pertama, gunakan informasi file input file untuk menentukan file ukuran file.
2. Kemudian gunakan antarmuka filereader HTML5 untuk mendapatkan data base64 dari gambar ini.
3. Lewati basis ini64 ke kanvas dan berfungsi sebagai src gambar. Pada saat ini, Anda dapat mengatur ukuran resolusi gambar untuk memastikan bahwa gambar yang diunggah memiliki resolusi terpadu. Tentu saja, itu juga dapat didasarkan pada ukuran gambar asli.
4. Sebelum AJAX, secara langsung menampilkan basis yang diproses64 (sehingga pengguna dapat segera melihat gambar yang diunggah), dan kemudian melewati Canvas.todataurl ("Image/Jpeg", 0.9) .split (',') [1] (Jenisnya adalah gambar/jpeg, Anda dapat menggunakan parameter kedua untuk mengatur kualitas gambar) di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di latar belakang di lacky
5. Kemudian ikat URL yang dikembalikan di latar belakang ke properti data-URL gambar, dan hanya mendapatkan data-URL ketika AJAX dikirimkan, sehingga pengguna dapat melihatnya secepat mungkin, dan URL sebenarnya masih dalam proses Ajax ke latar belakang.
Postscript: Ada masalah dengan kedua solusi, yang akan mengunggah banyak gambar yang berlebihan ke latar belakang. Tetapi rekan -rekan di latar belakang tampaknya tidak keberatan.
Efek sebenarnya seperti ini http://www.qqchou.org/qqcweb/pages/photoiframe.html
Di atas adalah praktik proyek, formulir unggah gambar atau kompresi gambar front-end base64 (kompresi gambar front-end) yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!