Как реализовать асинхронную загрузку изображений в Java WebApp, сначала поймите следующие проблемы:
1. Загрузите изображение;
2. Предварительный просмотр загрузки изображения;
3. Загрузите изображение и измените адрес и добавьте его в базу данных асинхронно;
Основной контент <br /> В этом примере в основном используется чистый фронт-код HTML и JavaScript в качестве инструментов для запроса примеров кода демоверсии, которые реализуют загрузку изображения:
(1) Нажмите на код div, чтобы загрузить изображение:
<div id = "div1"> <input type = "file" id = "select" Accept = "image/*" MALTY> <A ID = "upload"> Загрузите изображение </a> <a onclick = "selectPhoto ();"> Выберите из галереи </a> <a id = "Back"> Cancel </a> </div>
(2) код JavaScript
<script type = "text/javascript"> // Получить элемент ввода формы загруженного изображения var fileChooser = document.getElementById ("Выберите"); // Создать холст для сжатия изображения var canvas = document.createElement ("canvas"); // Получить визуальный атрибут Canvas var ctx = canvas.getContext ('2d'); // плитка Canvas var tcanvas = document.createElement ("canvas"); var tctx = tcanvas.getContext ("2d"); // размер Canvas var maxSize = 100 * 1024; // Загрузите изображение Щелкнуть Event $ ("#upload"). On ("click", function () {fileChooser.click ();}) .on ("touchStart", function () {// Добавить атрибут элемента $ (this) .AdDClass ("touch");}). Oon ("touchend", function () {/remove Element attrubut $ (this). }); // элемент изменяет fileChooser.onchange = function () {// Если выбор пуст, верните операцию if (! This.files.length) return; // Создать массив загруженных изображений var files = array.prototype.slice.call (this.files); // Когда число больше 1 изображение, обратная операция, установленная здесь в соответствии с требованиями; Сторона ПК может загружать несколько изображений за раз и выбирать один на мобильной стороне, и можно предварительно просмотреть только одну страницу. Поскольку это мобильный терминал, это решение вынесено. if (files.length> 1) {alert ("только 1 изображение может быть загружено за раз"); возвращаться; } // Передача массива файлов загруженных картинок, вы можете просто принять его без прохождения. files.foreach (function (file, i) {// судья формат изображения if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var reater = new fileReader (); var li = document.createElement ("li"); // Размер изображения var = file.size/1024> 1024? 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; }// После того, как изображение загружается, сжимайте его, а затем загрузите его, если (img.complete) {callback (); }); }; // следующее связано с сжатием изображения; // Использование Canvas для сжатия (img) {var initisize = img.src.length; var width = img.width; var height = img.height; // Если изображение больше четырех мегапикселей, вычислите коэффициент сжатия и нажмите размер до менее чем 4 миллиона VAR -соотношение; if ((соотношение = ширина * высота / 4000000)> 1) {cutio = math.sqrt (соотношение); ширина /= соотношение; высота /= соотношение; } else {catio = 1; } canvas.width = ширина; Canvas.height = высота; // распространять фон ctx.fillstyle = "#fff"; ctx.fillrect (0, 0, canvas.width, canvas.height); // Если пиксель изображения больше 1 миллиона, используйте плитку, чтобы нарисовать количество VAR; if ((count = width * height / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // Рассчитайте, сколько плиток будет разделено на // Рассчитать ширину и высоту каждой плитки var nw = ~~ (ширина /count); var nh = ~~ (высота / count); tcanvas.width = nw; tcanvas.height = nh; for (var i = 0; i <count; i ++) {for (var j = 0; j <count; j ++) {tctx.drawimage (img, i * nw * соотношение, соотношение j * nh *, соотношение nw *, соотношение nh *, 0, 0, nw, nh); ctx.drawimage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawimage (img, 0, 0, width, высота); } // Выполнить минимальное сжатие var ndata = canvas.todataurl ('image/jpeg', 0,1); console.log ('до сжатия:' + initize); console.log ('после сжатия:' + ndata.length); console.log ('Скорость сжатия:' + ~~ (100 * (initisize - ndata.length) / initsize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; вернуть ndata; } // Загрузить изображение, преобразовать изображение BASE64 в двоичный объект, заполните его в FormData, чтобы загрузить функцию загрузки (Basest, тип, $ li) {var text = window.atob (basest.split (",") [1]); var buffer = new uint8array (text.length); var prime = 0, loop = null; for (var i = 0; i <text.length; i ++) {buffer [i] = text.charcodeat (i); } var blob = getBlob ([buffer], type); var xhr = new xmlhttprequest (); var formData = getFormData (); formData.Append ('upload', blob); // асинхронный запрос на загрузку изображений плагина Kindeditor JSP Page xhr.open ('post', '<%= request.getContextPath ()%>/kindeditor/jsp/upload_json.jsp'); xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {// возвращать адрес изображения на стороне сервера var face_img = xhr.responsetext; var id = $ ("#arid"). Text (); // Асинхронно добавление изображения $ .ajax ({type: «post», // асинхронно запросить класс действий Struts для вставки адреса изображения в URL базы данных: «Add_Article_faceUrl.Action», DataType: «json», Data: «faceurl =»+face_img+». к изображению в базе данных и храните его в скрытой области $ ("#arid"). Text (msg); }}; // Смоделировано отображение прогресса загрузки // Посказание данных. Первые 50% отображают прогресс xhr.upload.addeventListener ('Progress', function (e) {if (loop) return; prime = ~~ (100 * e.loaded/e.total)/2; $ li. MockProgress (); // поиск 50% данных использования функции выполнения моделирования mockProgress () {if (loop) return; LOOP = setInterval (function () {cement ++; $ li.find (". } xhr.send (formData); } / ** * Получить совместимость записи объектов Blob * @param buffer * @param format * @returns { *} * / function getBlob (буфер, формат) {try {return new Blob (buffer, {type: format}); } catch (e) {var bb = new (window.blobbuilder || window.webkitblobbuilder || window.msblobbuilder); buffer.foreach (function (buf) {bb.append (buf);}); вернуть bb.getblob (формат); }} / ** * get formData * / function getFormData () {var isneedShim = ~ navigator.useragent.indexof ('android') && ~ navigator.vendor.indexof ('Google') &&! navigator.useragent.match (/applewebkit // (/d+)/). pop () <= 534; Вернуть Isneedshim? new FormDatashim (): new FormData (); } / *** FormData Patch, патч Android Машины, которые не поддерживают FormData Blobs* @constructor* / function formDatashim () {console.warn ('с использованием formdata shim'); var o = this, parts = [], rate = array (21) .join ('-') + ( + new Date () * (1e16 * math.random ())). tostring (36), Oldsend = xmlhttprequest.prototype.send; this.append = function (имя, значение, имя файла) {parts.push ('-' + bounder + '/r/ncontent-disposition: form-data; name = "' + name + '' ''); if (value ancessionof blob) {parts.push ('; filename = "' + (filename || 'blob') + '"/r/ncontent-type:' + value.type + '/r/n/r/n'); parts.push (значение); } else {parts.push ('/r/n/r/n' + value); } parts.push ('/r/n'); }; // переопределить xhr send () xmlhttprequest.prototype.send = function (val) {var fr, data, oxhr = this; if (val === o) {// Добавление окончательных граничных строк parts.push ('-' + bound + '-/r/n'); // Создать Blob Data = getBlob (Parts); // Установите и прочитайте каплей в массив, который будет отправлен FR = new FileReader (); fr.onload = function () {oldsend.call (oxhr, fr.result); }; fr.onerror = function (err) {throw err; }; Fr.ReadAsarrayBuffer (данные); // Установите тип Multipart Content и Boudary this.setRequestHeader ('content-type', 'Multipart/Form-Data; Brandary =' + Boundary); Xmlhttprequest.prototype.send = Oldsend; } else {oldsend.call (this, val); }}; } </script>(3) Код, связанный с страницей Image, связанный с изображением загрузки JSP подключаемого модуля Kindeditor.
<%@ page language = "java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"%> <%@ page import = "java.util.*, java.io.*"%> <%@ page import = "java.simpledateformat"%> <%@ page ormons.pail. %> <%@ page import = "org.apache.commons.fileupload.disk.*"%> <%@ page import = "org.apache.commons.fileupload.servlet.*"%> <%@ page import = "org.apache.struts2.dispatcher.multipart.multipartequestwrapper"%@%@%@%@%@%@%@%@%@%@%@%@%@%@%@%@%@%@. import = "org.json.simple. *" %> < %/** * Kindeditor JSP * * Эта программа JSP является демонстрационной программой, и рекомендуется не использовать его непосредственно в реальных проектах. * Если вы обязательно используете эту программу напрямую, пожалуйста, внимательно подтвердите соответствующие настройки безопасности перед ее использованием. * //// Файл Сохранить путь к каталогу string savePath = pageContext.getServletContext (). GetRealPath ("/") + "Attached/"; // String savePath = "http://///192.168.1.226:8080/qslnbase//uploadfile/" ;/String = SavePath = SavePath = = SAVEPATH = = SAVEPATH = = SAVEPATH = = SAVEPATH = = SAVEPATH = = SAVEPATH = = SAVEPATH = SAVEPATH = SAVEPATH = SAVEPATH = «D:/www/QSLNADP/ADP/webRoot/kindeditor/attached/"; // файл сохранение каталога urlString saveUrl = request.getContextPath () + "/atchated/"; // Определить расширение файла, которое разрешено загружать hashmap <string, string> extmap = new hashmap <string> () extmap (string> extmap (string> (); "GIF, JPG, JPEG, PNG, BMP, BLOB"); EXTMAP.PUT ("FLASH", "SWF, FLV"); EXTMAP.PUT ("Media", SWF, FLV, MP3, WAV, WMA, WMV, MID, MPI, MPG, ASF, RM, RMVB "); "Doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // максимальный размер файла длинный максимальный out.println (geterror («Пожалуйста, выберите File.)); return;} // Проверьте файл каталога uploadDir = new File (savePath); if (! uploaddir.isdirectory ()) {out.println (geterror ("uploaddir.canwrite ())); return;} // Проверьте каталог request.getParameter ("dir"); return;} // Создать папку savePath + = dirname + "/"; saveUrl + = dirname + "/"; файл savedIrfile = new File (savePath); if (! savedirfile.exists ()) {savedirfile.mkdirs ();} simpledateformat sdf = new SimpleDateformat ("yyyyMmdd"); String ymd = sdf.format (new Date ()); savePath + = ymd + "/"; saveUrl + = ymd + "; (! Dirfile.exists ()) {dirfile.mkdirs ();} // struts2 -запрос обертчика MultipRecteRtequestWrapper warper = (MultipRequequestWrapper) Запрос; // Получить загруженную файл name fiLEname1 = warper.getfileNames ("upload") warper.getFiles ("upload") [0]; // Проверьте размер файла if (file.length ()> maxSize) {out.println (geterror ("Размер файла загрузки превышает ограничение.")); return;} // Проверьте строку расширения fileExt1 = filename1.substring (fileName1.lastIndexof (".") + 1) .tolowerCase (); // Refactor Имя файла upload SimpleDateFormat df1 = new SimpleDateFormat ("yyyyMmdhmmmss"); newfilEname1 = d.formAt ("yyyymmdhmmmss"); newfilename1 = d.format1atmat ("yyyymmdhmmss"); "_" + new Random (). Nextint (1000) + "." + fileExt1; byte [] buffer = new Byte [1024]; // Получить выходной поток файла FileOutputStream fos = new FileOutputStream (savePath + newFilename1); String url = savePath + newFilename1; out.println (url); // Получите текущий входной поток в память в in in in = new fileInprem (url); while ((num = in.read (buffer))> 0) {fos.write (buffer, 0, num); }} catch (Exception e) {e.printstacktrace (System.err);} наконец {in.close (); fos.close ();}%> <%! Private String geterror (String Message) {jsonObject obj = new jsonObject (); obj.put ("ошибка", 1); obj.put ("Сообщение", сообщение); вернуть obj.tojsonstring ();}%> ( 4) Пакет JAR для загрузки изображений Kindeditor выглядит следующим образом
A.commons-fileupload-1.2.1.jar
B.commons-IO-1.4.jar
C.json_simple-1.1.jar
Здесь нет кода JS о Kindeditor. Для получения подробной информации, пожалуйста, обратитесь к: Kinditor реализует автоматическую функцию загрузки изображений.
(5) Div для загрузки изображений Kindeditor выглядит следующим образом
<div id = "div2"> <ul> <li id = "wy"> <img style = "Высота: 100%; ширина: 100%; позиция: абсолют; верх: 0px;" src = "<%= request.getContextPath ()%>/shequ/images/index.png;" > </li> </ul> </div>
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.