Весенняя (Java, JS, HTML). Пример загрузки изображения. Пример подробного объяснения

HTML

 <#-Загрузите страницу тестирования Avatar, используя плагин ImgareAselect->

Наконец -то загрузил этот плагин, чтобы изучить ссылку

 <link rel = "styleSheet" type = "text/css" href = "$ {frontres}/imgareasel/css/imgareasel-animated.css"/> <link rel = "stylesheet" type = "text/css" href = "$ {frontres}/imgareReasel/css.Index"/$ {frontres}/imgareReasel/css. type = "text/javascript" src = "$ {frontres}/imgareasel/jquery-1.4.2.min.js"> </script> <script type = "text/javascript" src = "$ {frontres}/imgareRexelect/jquery.iMgareScrect.pack.js"> </imgareRectect/jquery.iMgareScript.pack.js "/script"/script "/script"/scriptelect stext stext stextem. src = "$ {frontres}/imgareAselect/ajaxfileupload.js"> </script> <cript> function addFile (obj) {//document.getElementById('Img').src = path; $ .ajaxfileupload ({url: '$ {huluurl}/trainer/upload/ajaxupload', // адрес запроса на стороне сервера, используемый для загрузки файлов secureuri: false, // требуется ли протокол безопасности, он обычно устанавливается на falseelementid: 'fone-flectile', // идентификато JSON SUCCEST: FUNCTION (DATA) {// Сервер успешно реагирует на функцию обработки var infoArray = eval ("("+data+")"); Alert ('Связь с сервером не удалась, попробуйте еще раз!'); } Предварительный просмотр функции (img, selection) {if (! selection.width ||! Selection.height) return; // Предварительный просмотр var scalex = 100 /selection.width; var scaley = 100 / selection.height; // var imgx = document.getElementById ("photo"). Style.width; var imgx = parseint ($ ("#photo"). css ("width"). split ("px") [0]); var imgy = parseint ($ ("#photo"). css ("высота"). split ("px") [0]); console.debug (imgx+"===="+imgy); $ ('#preview Img'). CSS ({width: math.round (scalex * imgx), высота: математика. $ ('#x1'). val (selection.x1); $ ('#y1'). val (selection.y1); $ ('#x2'). val (selection.x2); $ ('#y2'). val (selection.y2); $ ('#w'). val (selection.width); $ ('#h'). val (selection.height); // бэкэнд данных $ ('#x1s'). val (selection.x1); $ ('#y1s'). val (selection.y1); $ ('#x2s'). val (selection.x2); $ ('#y2s'). val (selection.y2); $ ('#imgx'). val (parseint (imgx)); // оригинальная ширина $ ('#imgy'). Val (parseint (imgy)); // исходная высота} $ (function (selection) {var imgx = $ ("#photo"). Css ("width"). Split ("px") [0]; var imgy = $ ("#photo"). CSS ("Высота"). Сплит ("px") [0]; vares = 0; console.debugugugebugug (imgx+"="+"+"; if (imgx> imgy) {ares = imgy; Area IAS.Setoptions ({Show: True}); ares; $ ('#Y1S'). Val (0); </script> <div style="margin-top:20px;"> <div> <div> <div> <div> <h4 style="font-weight: 600;float: left">Upload the photo</h4> </div> <div> <div style="margin-top: 15px"> <div> <div> <div style="float: left"> <div role="button" style="position: relative; Overflow: Hidden; фоновый цвет: #8dc21f; color: #ffffff; "> <pan>+добавить фото </span> <input id =" photofile "type =" file "name =" photofile "onchange =" addfile (this); " Style = «Высота: 34px; положение: абсолютно; справа: 0px; top: 0px; маржа: 0px; накладка: 0px; cursor: pointer; непрозрачность: 0;»> </div> </div> <span style = float: левая; и GIF, размер не превышает 5m </li> </ul> </span> </div> </div> <div> <div> <img src = "/images/$ {(trainer.photo)!" "}" id = "img"> </div> </div> </div> </div> <fort action = "$ {huluurlOtest/uploitest" method = "post" enctype = "multipart /form-data"> <input type = "text" id = "x1s" name = "x1s" value = "-" /> <input type = "text" id = "y1s" name = "y1s" value = "-" /> <input = "text" id = "x2s" name = "x2s" value = " />" hype "y name =" x2s "=" /" /" " /" /"" /"" /"" /"" /"" /"" /" /" " /" " /" " /" " /" " /" " /" " /" " /" " /" " /" " /" " /" " /". 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> <div> <dive> type="button"id="chongxinshangchuan">Re-upload</button> </div> <div> <button type="submit" id="baocun"> Save</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="root"> <div id = "main"> <div> <div> <div style = "float: слева; Ширина: 50%; "> <p> Нажмите и перетащите изображение, чтобы выбрать область. Текст-альбом: Центр; переполнение: скрыто; Z-Index: 1001; Ширина: 300px; Высота: 300px; позиция: относительно; Слева: 50%; Верх: 50%; Мяглевая маржа: -150px; маржинальная версия: -150px; "> <img id =" photo "src ="/images/$ {(trainer.photo)! ""} "style =" max-height: 300px; max-width: 300px; "/> </div> </div> </div> </div> </div> <div style =" float: осталось; Ширина: 50%; "> <p style =" размер шрифта: font-weight: bold; Ladding-left: 0.1em; "> Предварительный просмотр выбора </p> <div> <div id =" preview "> <img src ="/images/$ {trainer.photo!} "/> </div> </div> <table> <thead> <tr> <th colspan =" 2 "style =" font-size: 110%; шрифт-вес: жирный шрифт; Текст-альбом: слева; Лебь накладки: 0,1ем; "> координаты </th> <th Colspan =" 2 "style =" font-size: 110%; шрифт-вес: жирный шрифт; Текст-альбом: слева; ПЛАДИНА СЛЕДУ: 0,1EM; "> Размеры </th> </tr> </thead> <tbody> <tr> <td> <b> x <sub> 1 </sub>: </b> </td> <td> <pint type =" text "id =" x1 "value ="-"/> </td> <td> <b> width: </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> </b> value =" 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><b>Height:</b></td> <td><input type="text" 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> <b> y <b> </> </td> <td> </td> <td> <b> y <b> </sub>: </td> <td> <b> y <b> <b> y <b>. </tr> <td> <b> y <sub> 2 </sub>: </b> </td> <td> <input type = "text" id = "y2" value = "-"/> </td> <td> </td> <td> </td> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tbody> </table> </div> </div> </td>

Ява

 // Показание изображения требует виртуального пути (tomcat) на сервере Server.xml <context debug = "0" docbase = "g:/image" path = "/images" reloadable = "true"/> echo [java] Просмотр просмотра копирования код на код, полученные для фрагментов моего кода/** * Скип для загрузки 2 (может быть. «TouploadPhoto», Method = requestMethod.get) public modelAndView touploadTest () {modelandView mav = LeftMenu ("/trainer/upload/uploadphoto"); // тренер тренер = null; try {long userid = frontshiroutil.getuserid (); if (null! = userid) {trainer = trainerRepo.findone (userId); Trainerdbsvc.updateLastLogintime (userId); }} catch (Exception e) {e.printstackTrace (); } mav.addobject ("тренер", тренер); вернуть мав; } // Local Revlesh Road Image @requestmapping ("/ajaxupload") public @responsebody ajaxresult ajaxupload (MultiparthttpservletRequest) {Trainer Trainer = new Trainer (); // Получить первое изображение (получить загруженный файл в соответствии с именем стойки регистрации) MultiplaartFile file = request.getFile ("photofile"); if (file.getSize ()! = 0) {// Получить имя файла: string filename = file.getoriginalfilename (); String Timetype = null; if (null! = filename &&! filename.equals ("")) {string imgtype = filename.substring (filename.lastIndexof (".")); // Получить строку пути ctxpath = "e:/rudongimage/photo/"; // Создание файла файла dirpath = new File (ctxpath); if (! dirpath.exists ()) {dirpath.mkdirs (); } // Поберите время в качестве имени файла дата дата = new Date (); SimpleDateFormat sdformat = new SimpleDateFormat ("yyyyMmddhmmss"); // 24-часовая строка lgtime = sdformat.format (date); timetype = lgtime + imgtype; File uploadfile = new File (ctxpath + timetype); try {filecopyutils.copy (file.getbytes (), uploadfile); } catch (ioException e) {e.printstackTrace (); }} String HeadPhotoPath = "Photo/" + TimeType; Trainer.SetPhoto (Headphotopath); } try {// Запросить тренер на основе пользователя Long userId = frontshiroutil.getUserid (); if (null! = userid) {trainer.setUserid (userId); // Обновление тренера Avatar Trainerdbsvc.updateTrainerPhoto (тренер); }} catch (Exception e) {e.printstackTrace (); } вернуть ajaxresult.createSuccess (тренер); // <span style = "font-family: arial, helvetica, sans-serif;"> ajaxresult можно изменить </span>}/** * Тест на загрузку в области перехвата * * @return */@requestmapping (value = "uploadpototest", method-method.post) public uplectyview (multiePletestp @RequestParam("x1s") Integer x1, @RequestParam("y1s") Integer y1, @RequestParam("x2s") Integer x2, @RequestParam("y2s") Integer y2, @RequestParam("imgx") Integer imgWidth, @RequestParam("imgy") Integer imgHeight) {ModelandView mav = LeftMenu ("redirect:/trainer/upload/touploadphoto"); Тренер тренер = null; try {// Запросить тренер на основе пользователя Long UserId = frontShiroutil.getUserid (); if (null! = userid) {trainer = trainerRepo.findone (userId); }} catch (Exception e) {e.printstackTrace (); } Файл uploadfile = new File ("e:/rudongimage/" + trainer.getPhoto ()); InputStream IS = null; BufferedImage src = null; int w = -1; int h = -1; try {is = new FileInputStream (uploadFile); src = javax.imageio.imageio.read (is); w = src.getwidth (null); // Получить ширину источника изображения h = src.getheight (null); // Получить высоту исходного графа is.close (); } catch (Exception e) {e.printstackTrace (); } Целое число l = 0; // Использовать небольшие края в качестве основы (исходный размер изображения) if (w <h) {l = w; } else {l = h; } // Использование небольших краев в качестве базисного (размер миниатюры) целое число l2 = 0; if (imgwidth <imgheight) {l2 = imgwidth; } else {l2 = imgheight; } Integer x = (x1 * l)/ l2; // Отдельная точка x integer y = (y1 * l)/ l2; // Отдельная точка y integer xs = (x2 * l)/ l2; // конечная точка x диагональная позиция Imageut Imageut Imageut Imageut Imageut ImageUtil = (y2 * l)/ l2; // конечная точка y diagonal Imageut ImageUtil ();/ L // вернуть перехваченное имя файла string photoname = ""; ImageUtil.cutimage (uploadfile, "e:/rudongimage/photo/", x, y, xs - x, ys - y); String Headphotopath = "photo/" + photoname; Trainer.SetPhoto (Headphotopath); // Обновление тренера Avatar Trainerdbsvc.updateTrainerPhoto (тренер); вернуть мав; }

Инструменты

 импортировать java.awt.color; импортировать java.awt.graphics; импортировать java.awt.image; импортировать java.awt.rectangle; Импорт java.awt.image.bufferedImage; Импорт java.io.file; импортировать java.io.fileinputstream; Импорт java.io.filenotFoundException; импортировать java.io.ioexception; импортировать java.io.inputstream; импортировать java.io.outputstream; импортировать java.util.arrays; импортировать java.util.iterator; Импорт javax.imageio.imageio; Импорт javax.imageio.imagereadParam; Импорт javax.imageio.imagereader; импортировать javax.imageio.stream.imageinputstream; Импорт org.slf4j.logger; Импорт org.slf4j.loggerfactory; / *** Класс инструмента Interceptor Image*/ public class ImageUtil {private logger log = loggerFactory.getLogger (getClass ()); Приватная статическая строка default_thumb_prevfix = "thumb_"; Приватная статическая строка default_cut_prevfix = "cut_"; Private Static Boolean Default_force = false; /*** <p> Название: cutimage </p>* <p> Описание: перехватывает локальные изображения на основе исходного изображения и размер культуры </p>* @param srcimg Изображение источника* @param Выходное изображение ВЫХОДА* @param rect Координаты и размер детали должны быть перехвачены*/public void cutimage (file srcimg, выходной выход, выход, java. retmangle. if (srcimg.exists ()) {java.io.fileinputStream fis = null; ImageInputStream IIS = NULL; try {fis = new FileInputStream (srcimg); // Imageio поддерживает типы изображений: [BMP, BMP, JPG, JPG, WBMP, JPEG, PNG, PNG, JPEG, WBMP, GIF, GIF] TIPES = ARRAYS.TOSTRING (Imageio.getReaderFormatNames ()). Заменить ("]", "); Строка суффикс = null; // Получить суффикс изображения if (srcimg.getname (). Indexof (".")> -1) {суффикс = srcimg.getname (). Substring (srcimg.getname (). LastIndexof (".") + 1); } // Тип и суффикс изображения - все строчные, а затем определяют, является ли суффикс законным, если (суффикс == null || types.tolowercase (). Indexof (суффикс.tolowercase () + ",") <0) {log.info («Извините, суффикс изображения является незаконным. Стандартное суфикс изображения - {}.». + Типы); возвращаться ; } // конвертировать FileInputStream в ImageInputStream IIS = ImageIO.CreateImageInputStream (FIS); // Получить ImageReader такого типа в соответствии с типом изображения imemereader reader = imageio.getimagereadersbysuffix (суффикс) .next (); reader.setInput (iis, true); ImageReadParam param = reader.getDefultReadParam (); param.setsourceregion (rect); BufferedImage bi = reader.read (0, param); Imageio.write (Bi, суффикс, выход); } catch (filenotFoundException e) {e.printstackTrace (); } catch (ioException e) {e.printstackTrace (); } наконец {try {if (fis! = null) fis.close (); if (iis! = null) iis.close (); if (output! = null) output.close (); } catch (ioException e) {e.printstackTrace (); }}}} else {log.info ("Изображение SRC не существует."); }} public void cutimage (file srcimg, вывод outputstream, int x, int y, int width, int height) {cutimage (srcimg, выход, new java.awt.rectangle (x, y, width, height)); } public void cutimage (файл srcimg, string destimgpath, java.awt.rectangle rect) {file destimg = new File (destimgpath); if (destimg.exists ()) {string p = destimg.getPath (); попробуйте {if (! destimg.isdirectory ()) p = destimg.getParent (); if (! p.endswith (file.separator)) p = p + file.separator; cutimage (srcimg, new java.io.fileoutputstream (p + default_cut_prevfix + "_" + new java.util.date (). gettime () + "_" + srcimg.getName ()), rect); } catch (filenotFoundException e) {log.info («Изображение DEST не существует»); }} else log.info («Папка Dest Image не существует.»); } public void cutimage (файл srcimg, string destimg, int x, int y, int width, int height) {cutimage (srcimg, destimg, new java.awt.rectangle (x, y, width, height)); } public void cutimage (String srcimg, String destimg, int x, int y, int width, int height) {cutimage (новый файл (srcimg), destimg, new java.awt.rectangle (x, y, width, высота)); }/*** <P> Название: ThumbNailImage </p>* <p> Описание: генерировать миниатюры на основе пути изображения </p>* @param Imagepath Path* @param w Миниатюра. false, сгенерирована магистраль лучшего масштаба) */ public void thumbnailimage (file srcimg, outputstream output, int w, int h, string prevfix, boolean force) {if (srcimg.exists ()) {try {// Поддерживаемые изображения ImageIo JPEG, WBMP, GIF, GIF] String Types = Arrays.toString (imageio.getReaderFormatNames ()). Заменить ("]", ","); Строка суффикс = null; // Получить суффикс изображения if (srcimg.getname (). Indexof (".")> -1) {суффикс = srcimg.getname (). Substring (srcimg.getname (). LastIndexof (".") + 1); } // Тип и суффикс изображения - все строчные, а затем определяют, является ли суффикс законным, если (суффикс == null || types.tolowercase (). Indexof (суффикс.tolowercase () + ",") <0) {log.info («Извините, суффикс изображения является незаконным. Стандартное суфикс изображения - {}.». + Типы); возвращаться ; } log.info ("Размер целевого изображения, ширина: {}, высота: {}.", w, h); Image img = imageio.read (srcimg); // Найти наиболее подходящую шкалу миниатюры на основе исходного изображения и требуемой шкалы миниатюры if (! Force) {int width = img.getWidth (null); int height = img.getheight (null); if ((ширина*1.0)/w <(высота*1.0)/h) {if (width> w) {h = integer.parseint (new java.text.decimalformat ("0"). Формат (высота*w/(ширина*1.0))); log.info ("Изменить высоту изображения, ширина: {}, высота: {}.", w, h); }} else {if (height> h) {w = integer.parseint (new java.text.decimalformat ("0"). Формат (ширина * h/(height * 1.0)); log.info ("Изменение изображения. BuffereMage.Type_int_rgb); System.out.println («генерировать изображение миниатюрного производства».+E); if (! srcimg.isdirectory ()) p = srcimg.getParent (); (FilenotFoundException e) {log.info («Изображение DEST не существует.»+E); }} public void ThumbNailImage (String ImagePath, Int W, Int H, String Prevfix, Boolean Force) {file srcimg = new File (imagePath); Thumbnailimage (srcimg, w, h, prevfix, 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) Throws Exception {// Получить итератор считывателей изображения = ImageIo.getImageDeDersByformatName ("png"); ImageReader Reader = (Imageereader) readers.next (); // Получить считывающее устройство изображения притока inputstream source = new FileInputStream (src); ImageInputStream IIS = ImageIO.CreateImageInputStream (Source); reader.setInput (iis, true); // Параметры изображения ImageReadParam param = reader.getDeftreadParam (); // 100, 200 - начальная позиция в верхнем левом, 300 - ширина 300, которая составляет 300 от 100, что составляет 100 ~ 400 горизонтально. Точно так же площадь 200 ~ 350 вертикально берет высоту 150 // прямоугольник прямоугольник = новый прямоугольник (100, 200, 300, 150); // int hh = 0; if (h> 100) Hh = (H - 100) / 3; Прямоугольник прямоугольник = новый прямоугольник (0, HH, 227, 100); param.setsourceregion (rect); BufferedImage bi = reader.read (0, param); Imageio.write (Bi, "jpg", новый файл (dest)); } public static void main (string [] args) бросает исключение {// new ImageUtil (). ThumbNailImage ("imgs/tulips.jpg", 150, 100); // new ImageUtil (). Cutimage ("imgs/tulips.jpg", "imgs", 250, 70, 300, 400); // new ImageUtil (). ReadUsingImagerEader ("e: //rudongimage/photo/20160302090226.png", "e: //rudongimage/photo/2.png", 227, 163); }}

конфигурация XML

 <bean id = "multiartresolver" class = "org.springframework.web.multipart.commons.commonsmultipartresolver"> <!- одно из доступных свойств; Максимальный размер файла в байтах <name = "maxUploadSize" value = "9999999999"/>-> </bean>

Подключение плагина

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

Есть некоторые уродливые функции, если стиль не отрегулирован.