Spring (Java, JS, HTML) Tangkapan layar Upload Contoh Gambar Detail Penjelasan

html

 <#-Unggah halaman uji avatar menggunakan plug-in imgareaselect->

Akhirnya mengunggah plugin ini untuk mempelajari referensi

 <tautan rel = "stylesheet" type = "text/css" href = "$ {frontres} /imgareasel/css/imgareasel-animated.css"/> <link rel = "stylesheet" type = "text/css" href = "$ {frontrres}/csss/css" href = "$ {frontrres}/crucsel type = "Text/JavaScript" src = "$ {frontres} /imgareasel/jquery-1.4.2.min.js"> </script> <script type = "text/javascript" src = "$ {frontres} /imgareaselect/jQuery.imgareaselect.pack.pack.pack.pack.pack.prips =" TEPPS/TEXPRIPS = "JCROPS/JROPK/TEPPS =" JCROPS/JROPRCRES/JROPREST/JAGEK/JAGACRIPS/JAGACRICK.PAPK.PAPK.PAPP.PAPK.PAPP.PAPK.PAPK.PAPK.PAPK.PAPK.PAPK.PAPK.PAPP.PACK. src = "$ {frontres} /imgareaselect/ajaxfileupload.js"> </script> <script> function addFile (obj) {//document.geteLementById('img').src = path; $ .AJAXFILEUPLOAD ({url: '$ {huluUrl}/pelatih/unggah/ajaxupload', // Alamat permintaan sisi server yang digunakan untuk pengunggahan file Secureuri: false, // apakah tipe protokol yang ditetapkan, unggah, jilid, unggah, jilid, unggah, unggah, unggah, unggah, unggah, unggah, unggah, unggul. JSON SUCCES: Data) {// Server berhasil menanggapi fungsi pemrosesan var infoarray = eval ("("+data+"))); alert ('Komunikasi dengan server gagal, coba lagi nanti!'); } function preview (img, seleksi) {if (! selection.width ||! selection.height) kembali; // pratinjau var scalex = 100 /selection.width; var scaley = 100 / selection.height; // var imgx = document.geteLementById ("foto"). style.width; var imgx = parseInt ($ ("#photo"). css ("width"). split ("px") [0]); var imgy = parseInt ($ ("#photo"). CSS ("Height"). Split ("px") [0]); console.debug (imgx+"===="+imgy); $ ('#Pratinjau img'). CSS ({width: math.round (skalax * imgx), tinggi: math.round (skala * imgy), marginleft: -math.round (scalex * selection.x1), margintop: -math.round (skala * seleksi * seleksi.y1)}); $ ('#x1'). Val (selection.x1); $ ('#y1'). Val (selection.y1); $ ('#x2'). Val (selection.x2); $ ('#y2'). Val (selection.y2); $ ('#w'). Val (selection.width); $ ('#h'). Val (selection.height); // data backend $ ('#x1s'). val (selection.x1); $ ('#y1s'). Val (selection.y1); $ ('#x2s'). Val (selection.x2); $ ('#y2s'). Val (selection.y2); $ ('#imgx'). Val (parseInt (imgx)); // lebar lebar asli $ ('#imgy'). Val (parseint (imgy)); // Tinggi asli} $ (fungsi (seleksi) {var imgx = $ ("#photo"). Css ("lebar"). Split ("px") [0]; var imgy = $ ("#photo"). CSS ("tinggi"). Split ("px") [0]; var ares = 0; console.debug ("px") [0]; var ares = 0; console.deBug (iMgx "; if (imgx> imgy) {ares = imgy;} else {ares = imgx; Area IAS.SetOptions ({show: true}); ARES; $ ('#y1s'). Val (0); </script> <div style = "margin-top: 20px;"> <verv> <verv> <verv> <vli> <h4 style = "font-weight: 600; float: left"> Unggah foto </h4> </div> <vf logie = "margin-top: 15px"> <Div> <Div> <Div style = "Posisi =" LIFT "<15px"> <v div> <Div> <Div style = "POSISE =" LIFT "<15px"> <v div> <v div> <Div style = "POSISE =" LIFT "<15px"> <v div> <v div> <Div style = "POSISE =" LIFT "<15px"> <v div> <v div>; tersembunyi; latar belakang-warna: #8dc21f; warna: #ffffff; "> <span>+Tambahkan foto </span> <input id =" photofile "type =" file "name =" photofile "onchange =" addFile (this); " style="height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> </div> </div> <span style="float: left; margin-left: 15px; color: #888888"> <ul> <li>Suggest your photos</li> <li>Only support JPG, Png, dan gif, ukurannya tidak melebihi 5m </li> </ul> </span> </div> </div> <div> <div> <img src = "/gambar/$ {(trainer.photo)!" "}" ID = "img"> </div> </div> </div> </Div> Formulir Acti = "$ {huluUrl}/pelatih/unggah/unggahphotest" metode = "post" enctype = "multipart/form-data"> <input type = "text" id = "x1s" name = "x1s" name = "-"/"-type =" Text "ID =" y1s "name =" y1 = "" name = "" name = "name" name = "" name = "" name = "" name = "" name = "y1 =" "name =" y1 = "name =" y1 = "y1 =" y1 = "y1 =" y1 = "y1 =" y1 = "name =" y1 "name =" y1 " name = "x2s" value="-" /> <input type="text" id="y2s" name = "y2s" value="-" /> <input type="text" id="imgx" name = "imgx" value="-" /> <input type="text" id="imgy" name = "imgy" value="-" /> <div style="margin-top: 15px; margin-left: 80px "> <div> <viv> <tombol type =" tombol "id =" chongxinshangchuan "> ulang kembali </button> </div> <div> <tombol type =" kirim "id =" Baocun "> Simpan </Div> </Div> </Form> </Div> </Div> </Div> </Div> </div> </div> </div> <div id = "root"> <div id = "Main"> <Div> <v> <div style = "float: left; Lebar: 50%; "> <p> Klik dan seret pada gambar untuk memilih area. </p> <div> <div> <div style =" line-height: 300px; Teks-Align: tengah; meluap: tersembunyi; z-index: 1001; Lebar: 300px; Tinggi: 300px; Posisi: kerabat; Kiri: 50%; Atas: 50%; margin -kiri: -150px; margin -top: -150px; "> <img id =" foto "src ="/gambar/$ {(trainer.photo)! ""} "style =" max-height: 300px; max-width: 300px; "/> </div> </div> </div> </div> </div> <div style =" float: left; Lebar: 50%; "> <p style =" font-size: font-weight: tebal; Padding-left: 0.1em; "> Pratinjau Seleksi </p> <div> <Div id =" Preview "> <img src ="/gambar/$ {trainer.photo!} "/> </div> </div> <abl> <Table> <tr> <th colspan =" 2 "style =" font: 110%; font-weight: tebal; Teks-Align: Kiri; Padding-left: 0.1em; "> Koordinat </th> <th colspan =" 2 "style =" font-size: 110%; font-weight: tebal; Teks-Align: Kiri; Padding-left: 0.1em; "> Dimensi </t> </tr> </thead> <tbody> <tr> <td> <b> x <sub> 1 </sub>: </b> </td> <td> <input =" TEXT "ID =" X1 "Value ="-"/Td </td> </td> </td </td </td </td </td </td </td </td </td </td =" type = "Text" value = "-" id = "w"/> </td> </tr> <tr> <td> <b> y <sub> 1 </sub>: </b> </td> <td> <input type = "Text" ID = "y1" value = "-"/> </td> <td> <"typ =" n value = "-" id = "h" value = "-"/> </td> </tr> <tr> <td> <b> x <sub> 2 </sub>: </b> </td> <td> <input type = "text" id = "x2" value = "-" /> </td> <td> </td </td> </td> </B </</SUB </TD </td> </td> </B </B </B </td </td> </td </td> </td </td> <td> </td> </tr> <td> <b> y <sub> 2 </sub>: </b> </td> <td> <input type = "text" id = "y2" value = "-"/> </td> </td </td> <t/div </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td>

Jawa

 // Menampilkan gambar memerlukan jalur virtual (tomcat) di server server.xml <konteks debug = "0" docbase = "g:/gambar" path = "/gambar" reloadable = "true"/> echo data [java] view copy fragments @can * @ @cane @ @ @ @loncu @ "TouploadPhoto", Method = RequestMethod.get) Public ModelAndView TouploadTest () {ModelAndView MAV = LeftMenu ("/Trainer/Unggah/UploadPhoto"); // pelatih pelatih = null; coba {long userid = frontshiroutil.getUserId (); if (null! = userId) {trainer = trainerrepo.findone (userId); trainerdbsvc.updateLastLogInme (userid); }} catch (Exception e) {e.printstacktrace (); } mav.addObject ("pelatih", pelatih); mengembalikan mav; } // Refresh Local Refresh Image @RequestMapping ("/AjaxUpload") public @ResponseBody AjaxResult AjaxUpload (Permintaan MultipartttpServletRequest) {Trainer Trainer = New Trainer (); // Dapatkan gambar pertama (dapatkan file yang diunggah sesuai dengan nama meja depan) file multipartfile = request.getFile ("photofile"); if (file.getSize ()! = 0) {// Dapatkan nama file: string fileName = file.getoriginalFileName (); String timeType = null; if (null! = filename &&! filename.equals ("")) {string imgType = filename.substring (filename.LastIndexof (".")); // Dapatkan string path ctxpath = "e:/rudongimage/photo/"; // Buat File File Dirpath = File Baru (CTXPath); if (! Dirpath.exists ()) {dirpath.mkdirs (); } // Ambil waktu sebagai tanggal nama file tanggal = tanggal baru (); SimpleDateFormat sdFormat = new SimpleDateFormat ("yyyymmddhhmmss"); // string 24-jam lgtime = sdFormat.Format (date); TimeType = LGTIME + IMGTYPE; File unggahfile = file baru (ctxpath + timeType); coba {filecopyutils.copy (file.getbytes (), unggahfile); } catch (ioException e) {e.printstacktrace (); }} String headphotopath = "photo/" + timeType; Trainer.setphoto (headphotopath); } coba {// query pelatih berdasarkan userid long userid = frontshiroutil.getUserId (); if (null! = userId) {trainer.setUserId (userId); // perbarui pelatih Avatar Trainerdbsvc.updateRainerPhoto (pelatih); }} catch (Exception e) {e.printstacktrace (); } return ajaxResult.createSuccess (pelatih); //<span style="font-family: Arial, Helvetica, sans-serif;">AjaxResult can be modified</span> } /** * Intercept area upload image test* * @return */ @RequestMapping(value = "uploadPhotoTest", method = RequestMethod.POST) public ModelAndView uploadPhotoTest(MultipartHttpServletRequest request, @RequestParam ("x1s") Integer x1, @requestparam ("y1s") integer y1, @requestparam ("x2s") integer x2, @requestparam ("y2s") integer y2, @requestparam ("iMgx") integer) @requestparam ("iMgx") Imgwid -"" "iMgx") IMGWIDTHIGEM) IMGHeight) {ModelAndView mav = LeftMenu ("Redirect:/Trainer/Unggah/TouploadPhoto"); Pelatih pelatih = null; coba {// query pelatih berdasarkan userid long userid = frontshiroutil.getUserId (); if (null! = userId) {trainer = trainerrepo.findone (userId); }} catch (Exception e) {e.printstacktrace (); } File unggahfile = file baru ("e:/rudongimage/" + trainer.getPhoto ()); InputStream adalah = null; BufferedImage SRC = NULL; int w = -1; int h = -1; coba {is = new FileInputStream (unggahfile); src = javax.imageio.imageio.read (IS); w = src.getWidth (null); // Dapatkan lebar gambar sumber h = src.getHeight (null); // Dapatkan ketinggian grafik sumber adalah.close (); } catch (Exception e) {E.PrintStackTrace (); } Integer l = 0; // Gunakan tepi kecil sebagai dasar (ukuran gambar asli) if (w <h) {l = w; } else {l = h; } // Gunakan tepi kecil sebagai dasar (ukuran thumbnail) integer l2 = 0; if (imgwidth <imgheight) {l2 = imgwidth; } else {l2 = imgheight; } Integer x = (x1 * l) / l2;// Starting point x Integer y = (y1 * l) / l2;// Starting point y Integer xs = (x2 * l) / l2;// End point x Diagonal position Integer ys = (y2 * l) / l2;// End point y Diagonal position ImageUtil imageUtil = new ImageUtil(); // kembalikan nama file yang dicegat string photoname = ""; Imageutil.cutimage (unggahfile, "e:/rudongimage/foto/", x, y, xs - x, ys - y); Headphotopath = "foto/" + fotoname; Trainer.setphoto (headphotopath); // perbarui Avatar TrainerDBSVC.UpDateRainerPhoto (pelatih); mengembalikan mav; }

Peralatan

 impor java.awt.color; impor java.awt.graphics; impor java.awt.image; impor java.awt.rectangle; impor java.awt.image.bufferedimage; impor java.io.file; impor java.io.fileInputStream; impor java.io.filenotfoundException; impor java.io.ioException; impor java.io.inputstream; impor java.io.outputStream; impor java.util.arrays; impor java.util.iterator; impor javax.imageio.imageio; impor javax.imageio.imagereadparam; impor javax.imageio.imagereader; impor javax.imageio.stream.imageInputStream; impor org.slf4j.logger; impor org.slf4j.loggerFactory; / *** Kelas Alat Interceptor Image*/ kelas publik ImageUtil {private Logger Log = LoggerFactory.getLogger (getSclass ()); Private Static String default_thumb_prevfix = "thumb_"; Private Static String default_cut_prevfix = "cut_"; private static boolean default_force = false; /*** <p> Judul: CutImage </p>* <p> Deskripsi: mencegat gambar lokal berdasarkan gambar asli dan ukuran tanaman </p>* @param srcimg gambar sumber* @param output output stream* @param rect. if (srcimg.exists ()) {java.io.fileInputStream fis = null; ImageInputStream IIS = null; coba {fis = FileInputStream baru (srcimg); // Imageo mendukung tipe gambar: [BMP, BMP, JPG, JPG, WBMP, JPEG, PNG, PNG, JPEG, WBMP, GIF, GIF] String type = arrays.toString (Imageo.getReaderFormatnames ()). REPLACE ("],", "); String suffix = null; // Dapatkan sufiks gambar if (srcimg.getName (). IndexOf (".")> -1) {suffix = srcimg.getName (). } // Ketik dan sufiks gambar semuanya adalah huruf kecil, dan kemudian tentukan apakah akhirannya legal jika (sufiks == null || type.tolowercase (). IndexOf (suffix.tolowercase () + ",") <0) {log.info ("Maaf, suffix gambar ilegal. Gambar standar adalah {}." + kembali ; } // Konversi FileInputStream ke ImageInputStream IIS = ImageIO.CreateMageInputStream (FIS); // Dapatkan imagereader dari jenis ini sesuai dengan tipe gambar imagereader pembaca = imageo.getimagereadersbyuffix (sufiks) .next (); reader.setInput (IIS, true); Imagereadparam param = reader.getDefaultreadparam (); param.setsourceregion (rect); BufferedImage Bi = reader.read (0, param); Imageo.write (BI, Suffix, Output); } catch (FileNotFoundException e) {e.printstacktrace (); } catch (ioException e) {e.printstacktrace (); } akhirnya {coba {if (fis! = null) fis.close (); if (iis! = null) iis.close (); if (output! = null) output.close (); } catch (ioException e) {e.printstacktrace (); }}}} else {log.info ("Gambar SRC tidak ada."); }} cutimage public void (file srcimg, outputStream output, int x, int y, lebar int, int tinggi) {cutimage (srcimg, output, java.awt.rectangle baru (x, y, lebar, tinggi)); } cutimage public void (File srcimg, string destImgpath, java.awt.rectangle rect) {file desttimg = file baru (destImgpath); if (destImg.exists ()) {string p = destImg.getPath (); coba {if (! destimg.isdirectory ()) p = destImg.getParent (); if (! p.endswith (file.separator)) p = p + file.separator; cutimage (srcimg, java.io.fileOutputStream baru (p + default_cut_prevfix + "_" + java.util.date baru (). gettime () + "_" + srcimg.getname ()), rect); } catch (FileNotFoundException e) {log.info ("Gambar Dest tidak ada."); }} else log.info ("Folder gambar DEST tidak ada."); } cutimage public void (file srcimg, destsimg string, int x, int y, lebar int, tinggi int) {cutimage (srcimg, desttimg, java.awt.rectangle baru (x, y, lebar, tinggi)); } cutimage public void (String SRCIMG, String DestImg, int x, int y, int lebar, tinggi int) {cutimage (file baru (srcimg), destsimg, java.awt.rectangle baru (x, y, lebar, tinggi)); } /** * <p>Title: thumbnailImage</p> * <p>Description: Generate thumbnails based on image path</p> * @param imagePath Original image path* @param w Thumbnail width* @param h Thumbnail height* @param prevfix Generate the prefix of the thumbnail* @param force Whether to force thumbnails to be generated according to width and height (if false, Thumbnail skala terbaik dihasilkan) */ public void thumbnailimage (file srcimg, outputStream output, int w, int h, string previx, boolean force) {if (srcimg.exists () {coba {// Imageo Jenis gambar yang didukung: [bmp, bmp, jpg, jpg, jpg, wb, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg, jpg JPEG, WBMP, GIF, GIF] string type = arrays.tostring (Imageo.getReaderFormatnames ()). Ganti ("]", ","); String suffix = null; // Dapatkan sufiks gambar if (srcimg.getName (). IndexOf (".")> -1) {suffix = srcimg.getName (). } // Ketik dan sufiks gambar semuanya adalah huruf kecil, dan kemudian tentukan apakah akhirannya legal jika (sufiks == null || type.tolowercase (). IndexOf (suffix.tolowercase () + ",") <0) {log.info ("Maaf, suffix gambar ilegal. Gambar standar adalah {}." + kembali ; } log.info ("ukuran gambar target, lebar: {}, tinggi: {}.", W, h); Image img = ImageIo.read (SRCIMG); // Temukan skala thumbnail yang paling cocok berdasarkan gambar asli dan skala thumbnail yang diperlukan jika (! Force) {int width = img.getwidth (null); int tinggi = img.getheight (null); if ((lebar*1.0)/w <(tinggi*1.0)/h) {if (lebar> w) {h = integer.parseint (format java.text.decimalformat baru ("0"). Format (tinggi*w/(lebar*1.0)))); log.info ("Ubah tinggi gambar, lebar: {}, tinggi: {}.", W, h); }} else {if (height> h) {w = integer.parseint (java.text.decimalformat ("0"). BufferedImage.type_int_rgb); System.out.println (Hasilkan gambar Thumbnail Gagal. "+E); if (! srcimg.isdirectory ()) p = srcimg.getParent (); (FileNotFoundException e) {log.info ("Gambar Dest tidak ada."+E); }} public void thumbnailImage (String ImagePath, int w, int h, string previx, boolean force) {file srcimg = file baru (imagePath); thumbnailimage (srcimg, w, h, previx, force); } public void thumbnailImage (String ImagePath, int w, int h, boolean force) {thumbnailimage (imagepath, w, h, default_thumb_prevfix, default_force); } public void thumbnailImage (String ImagePath, int w, int h) {thumbnailimage (imagepath, w, h, default_force); } public void readUsingImagereader (String SRC, String Dest, int w, int h) melempar Exception {// Dapatkan pembaca pembaca gambar pembaca = Imageo.getImagereadersByFormatname ("png"); Imagereader reader = (imagereader) pembaca.next (); // Dapatkan inputsstream source InputStream Inplow = FileInputStream (SRC) baru; ImageInputStream IIS = ImageIO.CreateMageInputStream (Source); reader.setInput (IIS, true); // parameter gambar imagereadparam param = reader.getDefaultreadparam (); // 100, 200 adalah posisi awal di kiri atas, 300 adalah lebar 300, yaitu 300 dari 100, yaitu 100 ~ 400 secara horizontal. Demikian pula, luas 200 ~ 350 secara vertikal mengambil ketinggian 150 // persegi panjang = persegi panjang baru (100, 200, 300, 150); // int hh = 0; if (h> 100) hh = (h - 100) / 3; Persegi panjang rect = persegi panjang baru (0, hh, 227, 100); param.setsourceregion (rect); BufferedImage Bi = reader.read (0, param); Imageo.write (BI, "JPG", File Baru (DEST)); } public static void main (string [] args) melempar Exception {// new ImageUtil (). ThumbnailImage ("imgs/tulips.jpg", 150, 100); // gambar baru (). cutimage ("imgs/tulips.jpg", "imgs", 250, 70, 300, 400); // gambar baru (). readusingimagereader ("e: //rudongimage/photo/20160302090226.png", "e: //rudongimage/photo/2.png", 227, 163); }}

Konfigurasi XML

 <bean id = "multipartresolver" class = "org.springframework.web.multipart.commons.Commonsmultipartresolver"> <!- salah satu properti yang tersedia; Ukuran file maksimum dalam byte <name properti = "maxuploadsize" value = "999999999"/>-> </bean>

Koneksi plugin

http://download.csdn.net/download/u014596302/9572377

Ada beberapa fungsi jelek jika gayanya tidak disesuaikan.