Pengantar Pengunggah Web
WebUploader adalah komponen unggahan file modern sederhana terutama HTML5 dan ditambah dengan flash yang dikembangkan oleh tim Baidu Webfe (FEX). Di browser modern, kita dapat memberikan permainan penuh pada keunggulan HTML5, sementara tidak meninggalkan browser utama IE, dan terus menggunakan runtime flash asli, dan kompatibel dengan IE6+, iOS 6+, Android 4+. Dua set waktu berjalan, metode panggilan yang sama dapat dipilih oleh pengguna sesuka hati. Penggunaan fragmentasi file yang besar mengunggah secara bersamaan sangat meningkatkan efisiensi pengunggahan file.
Di sini kami menggunakan contoh dari situs web resmi untuk mengunggah avatar pribadi kami.
Fokus kami adalah cara mengunggah file menggunakan WebUploader di Proyek Boot Spring, sehingga kami dapat secara langsung menerapkan fungsi sederhana hanya untuk referensi.
Berikut adalah contoh yang diunduh dari situs web resmi: Fungsi Upload Gambar dengan Canam.
Kami menggunakan contoh untuk merombak unggahan avatar dalam proyek.
Efeknya terlihat seperti ini:
Pertama, mari kita merombak kode sampel WebUploader kami.
Berikut ini adalah beberapa kode dalam proyek saya:
(function (factory) {if (! window.jQuery) {alert ('jQuery diperlukan.')} jQuery (function () {factory.call (null, jQuery);});}) (function ($) {// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ERROR ('WebUploader tidak mendukung browser yang Anda gunakan.'); _.Deferen (); image.once ('complete', function () {var blob, size; // seluler uc / qq browser dalam mode bebas gambar // ctx.getImagedata akan melaporkan pengecualian saat memproses gambar besar // index_size_err: dom exception 1 coba {blob = image.getAsblob (); size = file. 'Ulang' Blob.Size, ukuran); Image.LoadFromblob (file.source); Jika ini digunakan, konten kosong dapat dihindari. $ .trim ($ ("#base_url"). Val ()) + '/static/webuploader/uploader.swf', FileNumLy: 1, // Hanya file gambar yang diizinkan. 'jpg, jpeg, png', // selesaikan webuploader chrome klik kotak pemilihan file unggah untuk menunda beberapa detik sebelum responsnya akan lambat mimetipe: 'gambar/jpg, gambar/jpeg, gambar/png' // memodifikasi baris ini} // formdata: {"otorisasi": local storage. // chunked: true, // shash // chunksize: 10 * 1024 * 1024, // SHASH Ukuran Menentukan // Threads: 1, // Jumlah Threads // DisableBlobaldnd: True // Nonaktif }}); unggah. / *** Verifikasi format file dan ukuran file* / unggah. 'Unggul', fungsi (File) {showInfo ("Unggul Jalan"); file._info.width; --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. unggah-btn'); var isbase64supted, callback; $ image.cropper ({aspectratio: 4/4, pratinjau: ".img-preview", done: function (data) {// console.log (data);}}); Fungsi srcwrap (src, cb) {// kita perlu memeriksa ini pada pertama kalinya. if (typeof isBase64Supported === 'tidak terdefinisi') {(function () {var data = gambar baru (); var dukungan = true; data.onload = data.onError = function () {if (this.width! = 1 || this.height! = 1) {dukungan = false;}} data. } if (isBase64Supported) {cb (src); } else {// jika tidak kita membutuhkan dukungan server. // Konversi Base64 ke file. // $ .Ajax ('', {// Metode: 'Post', // Data: SRC, // DataType: 'JSON' //}). Done (function (response) {// if (response.result) {// cb (response.result); //} else {// ware preview "); }} btn.on ('klik', function () {callback && callback ($ image.cropper ("getData")); return false;}); return {setSource: function (src) {// handle base64 tidak didukung. // umumnya terjadi di IE6-IE8 SRCWRAP (src, function (src) {$ image.cropper ("setimgsrc", src);}); container.removeclass ('Webuploader-Element-Invisible'); kembalikan ini; }, getImageSize: function () {var img = $ image.get (0); return {width: img.naturalwidth, tinggi: img.naturalHeight}}, setCallback: function (cb) {callback = cb; kembalikan ini; }, disable: function () {$ image.cropper ("Disable"); kembalikan ini; }, aktifkan: function () {$ image.cropper ("aktifkan"); kembalikan ini; }}}}}) (); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Pengunggah.crop (data); Pengunggah.upload (); }); }); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Ada juga beberapa kode untuk halaman ini:
Berikut ini kode untuk bagian pengontrol:
@RequestMapping(value="/student/StudentImgFileUpload", method=RequestMethod.POST) @ResponseBody String studentImgFileUpload(@RequestParam MultipartFile file, HttpServletRequest request){ logger.info("Student avatar upload...") //Get the file name String originalFilename = file.getOriginalFilename() Logger.info ("Unggah Nama File:" + OriginalFileName) String RealPath = Request.GetSerVletContext (). GetRealPath ("/Public/Student/") String unggahfileName = System.currentTimeMillis () + "_" + RealFileName Logger.info ("Get Boolean () ()" _ " + originalFileName Logger.info (" get unggah: "get unggah:", "get boolean (" get boolean ("get boolean (" get boolean ("get boolean (" get boolean ("get:" get unggah: // Gabungkan file acak ACCESCESSFILE rafile = null bufferedInputStream inputStream = null coba {file dirfile = file baru (realpath, unggahfileName) // buka file target dengan cara baca-rafile = randomAccessFile (Dirfile, "rw") rafile.seek.lakpile () () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile () rafile (rafile. BufferedInputStream (File.getInputStream ()) byte [] buf = byte baru [1024] int length = 0 while ((length = inputStream.read (buf))! = -1) {rafile.write (buf, 0, length)}} catch (pengecualian e) {flagle.info logger (false logger. IoException (e.getMessage ())} akhirnya {coba {if (inputStream! = Null) {inputStream.close ()} if (rafile! = Null) {rafile.close ()}} catch (exception e) {flag = false logger.info ("unggah:" E.) IoException (e.getMessage ())}}}Ini hanya mengimplementasikan fungsi menggunakan WebUploader untuk mengunggah file di Proyek Boot Spring.
Meringkaskan
Di atas adalah boot musim semi yang diperkenalkan kepada Anda oleh editor. Ini menggunakan WebUploader untuk mengunggah file. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!