Cara menerapkan unggahan gambar asinkron di Java Webapp, pertama -tama pahami masalah berikut:
1. Unggah gambar;
2. Pratinjau Upload Gambar;
3. Unggah gambar dan ubah alamat dan tambahkan ke database secara tidak sinkron;
Konten Utama <BR /> Contoh ini terutama menggunakan kode front-end dan javascript HTML murni sebagai alat untuk menanyakan contoh kode demo yang menerapkan pengunggahan gambar:
(1) Klik pada kode Div untuk mengunggah gambar:
<Div ID = "Div1"> <input type = "file" id = "pilih" accept = "image/*" multipel> <a id = "unggah"> Unggah gambar </a> <a onClick = "selectphoto ();"> Pilih dari galeri </a> <a id = "back"> Batal </a> </div>
(2) Kode JavaScript
<script type = "text/javascript"> // Dapatkan elemen formulir input dari gambar yang diunggah var filechooser = document.getElementById ("pilih"); // Buat kanvas untuk mengompresi gambar var canvas = document.createElement ("Canvas"); // Dapatkan atribut visual Canvas var ctx = canvas.getContext ('2d'); // ubin kanvas var tcanvas = document.createelement ("canvas"); var tctx = tcanvas.getContext ("2d"); // ukuran kanvas var maxsize = 100 * 1024; // Unggah gambar klik event $ ("#unggah"). On ("click", function () {filechooser.click ();}) .on ("touchstart", function () {// tambahkan atribut elemen $ (ini). " }); // elemen mengubah filechooser.onchange = function () {// Jika pemilihan kosong, kembalikan operasi jika (! This.files.length) return; // Buat array gambar yang diunggah var file = array.prototype.slice.call (this.files); // Ketika angkanya lebih besar dari 1 gambar, operasi terbalik, ditetapkan di sini sesuai dengan persyaratan; Sisi PC dapat mengunggah beberapa gambar sekaligus, dan memilih satu di sisi seluler, dan hanya satu halaman yang dapat dipratinjau. Karena ini adalah terminal seluler, penilaian ini dibuat. if (file.length> 1) {alert ("Hanya 1 gambar yang dapat diunggah sekaligus"); kembali; } // Transfer array file gambar yang diunggah, Anda bisa menerimanya tanpa melintasi. file.foreach (fungsi (file, i) {// menilai format gambar if (! /// (?: jpeg | png | gif) /i.test (file.type)) kembali; var reader = new filereader (); var li = document.createelement ("li");//dapatkan ukuran gambar var ukuran = fILE. 1024)/10 + "MB": ~~ (File.Size/1024) + "KB"; this.result; var img = new Image(); img.src = result; //The image display $(li).css("background-image", "url(" + result + ")"); //If the image size is less than 100kb, upload directly if (result.length <= maxsize) { img = null; upload(result, file.type, $(li)); return; }// After the gambar dimuat, tekankan dan kemudian unggah (img. }); }; // Berikut ini terkait dengan kompresi gambar; // Gunakan kanvas untuk mengompres (img) {var initsize = img.src.length; var width = img.width; var height = img.height; // Jika gambar lebih besar dari empat megapiksel, hitung rasio kompresi dan tekan ukurannya hingga kurang dari 4 juta rasio var; if ((rasio = lebar * tinggi / 4000000)> 1) {rasio = math.sqrt (rasio); rasio lebar /=; tinggi /= rasio; } else {rasio = 1; } canvas.width = lebar; canvas.height = tinggi; // sebarkan latar belakang ctx.fillstyle = "#fff"; ctx.fillrect (0, 0, canvas.width, canvas.height); // Jika piksel gambar lebih besar dari 1 juta, gunakan ubin untuk menggambar var count; if ((count = width * tinggi / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // Hitung berapa banyak ubin yang akan dibagi menjadi // Hitung lebar dan tinggi setiap ubin var nw = ~~ (lebar /hitungan); var nh = ~~ (tinggi / jumlah); tcanvas.width = nw; tcanvas.height = nh; untuk (var i = 0; i <count; i ++) {for (var j = 0; j <count; j ++) {tctx.drawimage (img, i * nw * rasio, rasio j * nh *, rasio nw *, rasio nh *, 0, 0, nw, nh); ctx.drawimage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawimage (img, 0, 0, lebar, tinggi); } // Lakukan kompresi minimum var ndata = canvas.todataurl ('gambar/jpeg', 0.1); console.log ('sebelum kompresi:' + initsize); console.log ('Setelah kompresi:' + ndata.length); console.log ('tingkat kompresi:' + ~~ (100 * (initsize - ndata.length) / initsize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; mengembalikan ndata; } // Unggah gambar, konversi gambar base64 menjadi objek biner, masukkan ke dalam formdata untuk mengunggah unggahan fungsi (basestr, type, $ li) {var text = window.atob (basestr.split (",") [1]); var buffer = uint8Array baru (text.length); var prime = 0, loop = null; untuk (var i = 0; i <text.length; i ++) {buffer [i] = text.charcodeat (i); } var blob = getBlob ([buffer], type); var xhr = xmlhttpRequest baru (); var formdata = getFormData (); formdata.append ('unggah', gumpalan); // Permintaan Asynchronous untuk mengunggah gambar Plugin Kindeditor JSP Halaman XHR.Open ('POST', '<%= request.getContextPath ()%>/Kindeditor/jsp/unggah_json.jsp'); xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {// Kembalikan alamat gambar di sisi server var face_img = xhr.responsetext; var id = $ ("#arid"). text (); // Tambahkan gambar $ .AJAX ({type: "POST", // secara tidak sinkron meminta kelas aksi struts untuk memasukkan alamat gambar ke dalam URL database: "add_article_faceurl.action", datasype: "json", data: "facurl ="+face_img+"& id =" iD, "json", data: "facUrl ="+face_img+"& id =" ID, "json", data: "facUrl ="+face_img+"& id =" ID, "JSON", DATA: "FacUrl ="+face_img+"& ID =" ID, " gambar dalam database dan menyimpannya di halaman tersembunyi $ ("#arid"). Teks (msg); }}; // Simulasi unggahan kemajuan tampilan // data mengirimkan kemajuan, 50% pertama menampilkan kemajuan xhr.upload.addeventListener ('progress', function (e) {if (loop) kembali; prime = ~~ (100 * e.Loaded/e.total)/2; $ li.find (". Rentang kemajuan"). mockprogress ();}}, false); // Cari 50% dari data penggunaan simulasi fungsi kemajuan mockprogress () {if (loop) return; loop = setInterval (function () {semen ++; $ li.find (". Rentang kemajuan"). css ('lebar', prime+"%"); if (pecent == 99) {clearinterval (loop);}}, 100); } xhr.send (formdata); } / ** * Dapatkan penulisan kompatibilitas objek Blob * @param buffer * @param format * @returns { *} * / function getBlob (buffer, format) {coba {return new blob (buffer, {type: format}); } catch (e) {var bb = new (window.blobbuilder || window.webkitblobbuilder || window.msblobbuilder); buffer.foreach (function (buf) {bb.append (buf);}); return bb.getBlob (format); }} / ** * Dapatkan formdata * / function getFormData () {var isNeedShim = ~ navigator.useragent.indexof ('android') && ~ navigator.vendor.indexof ('google') &&! ~ Navigator.useragent.indexof ('chrome') && &&! navigator.useragent.match (/applewebkit // (/d+)/). pop () <= 534; Kembalinya ISNEEDSHIM? FormDatashim baru (): FormData baru (); } / *** Patch FormData, tambalan mesin Android yang tidak mendukung FormData Unggah gumpalan* @constructor* / function formDatashim () {console.warn ('Menggunakan formdata shim'); var o = ini, bagian = [], batas = array (21) .join ('-') + ( + tanggal baru () * (1E16 * Math.random ())). ToString (36), oldsend = xmlhttproquest.prototype.send; this.append = function (name, value, filename) {parts.push ('-' + batas + '/r/ncontent-disposisi: form-data; name = "' + name + '"'); if (value instance dari blob) {parts.push ('; filename = "' + (nama file || 'blob') + '"/r/ncontent-tipe:' + value.type + '/r/n/r/n'); parts.push (nilai); } else {parts.push ('/r/n/r/n' + nilai); } parts.push ('/r/n'); }; // override xhr send () xmlHttpRequest.prototype.send = function (val) {var fr, data, oxhr = this; if (val === o) {// Tambahkan string batas final Parts.push ('-' + Boundary + '-/r/n'); // Buat data gumpalan = getBlob (bagian); // Mengatur dan membaca gumpalan ke dalam array untuk dikirim FR = new filereader (); fr.onload = function () {oldsend.call (oxhr, fr.result); }; fr.onerror = function (err) {throw err; }; Fr.ReadArrayBuffer (data); // Atur jenis konten multipart dan boudary this.setRequestHeader ('tipe konten', 'multipart/form-data; batas =' + batas); XmlHttpRequest.prototype.send = oldsend; } else {oldsend.call (this, val); }}; } </script>(3) Upload gambar JSP Halaman yang Terkait dengan Plug-in Kindedititor.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*" %><%@ page import="java.text.SimpleDateFormat" %><%@ page impor = "org.apache.commons.fileupload.*" %> < %@ page impor = "org.apache.commons.fileupload.disk.*" %> < %@ page impor = "org.apache.commons.fileupload.servlet.*" %> < %@ halaman@ page impor = "org.apache.struts2.dispatcher.multipart.multipartrequestwrapper"%> <%@ page impor = "org.json.sicle. *"%> <%/** * Kindeditor JSP * * Program JSP ini adalah program demonstrasi, dan disarankan untuk tidak menggunakannya secara langsung dalam proyek aktual. * Jika Anda yakin untuk menggunakan program ini secara langsung, harap konfirmasi dengan cermat pengaturan keamanan yang relevan sebelum menggunakannya. * * /// File Simpan Path Direktori String SavePath = pagecontext.getSerVletContext (). GetRealPath ("/") + "dilampirkan/"; // string savePath = "http:///192.168.1.226:8080//qslnbase/upload/Upload/30/3/168 "D:/WWW/qslnADP/ADP/WebRoot/kindeditor/attached/";//File save directory URLString saveUrl = request.getContextPath() + "/attached/";//Define the file extension that is allowed to be uploaded HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("image", "GIF, JPG, JPEG, PNG, BMP, Blob"); extmap.put ("Flash", "SWF, FLV"); extmap.put ("Media", "SWF, FLV, MP3, WAV, WMA, WMV, MID, AVI, MPG, ASF, RM, RMVB"); "DOC, DOCX, XLS, XLSX, PPT, HTM, HTML, TXT, ZIP, RAR, GZ, BZ2"); // Ukuran File Maksimum Long MaxSize = 1000000; Response.SetContentType ("Text/html; charset = UTF-8"); if (! ServletfileUPLEADISML; Charset = UTF-8 "); if (! out.println (getError ("Silakan pilih file.")); return;} // periksa file direktori unggahdir = file baru (savePath); if (! unggahdir.isdirectory ()) {out.println (getError ("unggahdir.canwrite ())); return;} // periksa izin tulis jika (! request.getParameter ("dir"); return;} // Buat folder savePath + = dirname + "/"; saveUrl + = dirname + "/"; file saveDirfile = file baru (savePath); if (! saveDirfile.exists ()) {saveDirfile.mkdirs ();} SimpleDateFormat sdf = new SimpleDateFormat ("yyyymmdd"); string ymd = sdf.format (new date ()); savePath + = ymd + "/; saveUrf. (! Dirfile.exists ()) {dirfile.mkdirs ();} // struts2 Permintaan Filter Wrapper MultiparRequestWrapper wrapper = (multipartrequestwrapper) permintaan; // Dapatkan file yang diunggah, Ukuran file if (file.length ()> maxSize) {out.println (getError ("Unggah ukuran file melebihi batas.")); return;} // Periksa string ekstensi fileext1 = filename1.substring (filename1.lastIndexof (".") + 1) .tolowercase (); // refactor nama file unggah newelate (new) ("yyyyymmddhmmss") ("yyyyymmdhmmss"); "_" + acak baru (). NextInt (1000) + "." + fileExt1; byte [] buffer = byte baru [1024]; // Dapatkan file output file output FileOutputStream fos = new FileOutputStream (savePath + newFileName1); string url = savePath + newFileName1; out.println (url); // dapatkan aliran file input {ne NewStream1; outgrintln (url); while ((num = in.read (buffer))> 0) {fos.write (buffer, 0, num); }} catch (exception e) {e.printstacktrace (System.err);} akhirnya {in.close (); fos.close ();}%> <%! Private String getError (string message) {jsonObject obj = new jsonobject (); obj.put ("error", 1); obj.put ("pesan", pesan); kembalikan obj.toJsonstring ();}%> ( 4) Paket JAR untuk mengunggah gambar oleh Kindeditor adalah sebagai berikut
A.Commons-Fileupload-1.2.1.jar
B.Commons-io-1.4.jar
C.Json_Simple-1.1.jar
Tidak ada kode JS tentang Kindeditor yang digunakan di sini. Untuk detailnya, silakan merujuk ke: Kinditor mengimplementasikan fungsi unggahan gambar otomatis.
(5) Div untuk mengunggah gambar oleh Kindeditor adalah sebagai berikut
<Div id = "Div2"> <ul> <li id = "wy"> <img style = "tinggi: 100%; lebar: 100%; posisi: absolute; atas: 0px;" src = "<%= request.getContextPath ()%>/shequ/images/index.png;" > </li></ul> </div>
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.