Java WebApp에서 비동기식 이미지 업로드를 구현하는 방법 먼저 다음과 같은 문제를 이해하십시오.
1. 사진을 업로드하십시오.
2. 사진 업로드 미리보기;
3. 이미지를 업로드하고 주소를 변경하고 데이터베이스에 비동기에 추가하십시오.
주요 내용 <br />이 예제는 주로 순수한 HTML 프론트 엔드 및 JavaScript 코드를 도구로 사용하여 이미지 업로딩을 구현하는 데모의 코드 예제를 쿼리합니다.
(1) DIV 코드를 클릭하여 이미지를 업로드하십시오.
<div id = "div1"> <input type = "file"id = "선택"accept = "image/*"multure> <a id = "ubload"> 이미지를 업로드 </a> <a onclick = "selectPhoto ();"> 갤러리에서 선택 </a> <a id = "back"> cancel </a> </div>
(2) JavaScript 코드
<script type = "text/javaScript"> // 업로드 된 이미지의 입력 양식 요소 가져 오기 var var filechooser = document.getElementById ( "선택"); // 이미지를 압축하기위한 캔버스 생성 var canvas = document.createElement ( "canvas"); // Canvas var ctx = canvas.getContext ( '2d')의 시각적 속성을 가져옵니다. // 타일 캔버스 var tcanvas = document.createElement ( "캔버스"); var tctx = tcanvas.getContext ( "2d"); // 캔버스 크기 var maxsize = 100 * 1024; // 이미지를 업로드하면 $ ( "#ubload"). on ( "click", function () {filechooser.click ();}) ( "t }); // 요소가 filechooser.onchange = function ()을 변경하십시오 {// 선택이 비어 있으면 작동을 반환합니다. // 업로드 된 이미지 배열 생성 var files = array.prototype.slice.call (this.files); // 숫자가 1보다 큰 경우, 리버스 작동은 요구 사항에 따라 여기에 설정됩니다. PC 쪽은 한 번에 여러 사진을 업로드하고 모바일 측면에서 하나를 선택할 수 있으며 한 페이지 만 미리 볼 수 있습니다. 모바일 터미널이기 때문에이 판단이 이루어집니다. if (files.length> 1) {alert ( "한 번에 단 1 개의 그림 만 업로드 할 수 있습니다"); 반품; } // 업로드 된 사진의 파일 배열을 전송하면 이동하지 않고 가져갈 수 있습니다. files.foreach (function (file, i) {// 이미지 형식 if (! /// (? : jpeg | png | gif) /i.test (file.type)) return; var reader = new Filereader (); var li = document.createElement ( "li"); // var var size = file.size/1024? 1024 "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 이미지가 압축 된 다음 {img.onload = Callpless (img); }); }; // 다음은 이미지 압축과 관련이 있습니다. // 캔버스를 사용하여 압축 (IMG) {var initsize = img.src.length; var width = img.width; var height = img.height; // 이미지가 4 메가 픽셀보다 크면 압축 비율을 계산하고 크기를 4 백만 Var 비율로 눌러; if ((비율 = 너비 * 높이 / 4000000)> 1) {ratio = math.sqrt (비율); 너비 /= 비율; 높이 /= 비율; } else {비율 = 1; } canvas.width = 너비; 캔버스. height = 높이; // 배경을 널리 퍼뜨립니다. ctx.fillStyle = "#fff"; ctx.fillRect (0, 0, canvas.width, canvas.height); // 이미지 픽셀이 백만보다 큰 경우 타일을 사용하여 var count를 그립니다. if ((count = 너비 * 높이 / 10000000)> 1) {count = ~~ (math.sqrt (count) + 1); // 분할 될 타일의 수를 계산하십시오. // 각 타일의 너비와 높이를 계산합니다. var nw = ~~ (너비 /수); var nh = ~~ (높이 / 카운트); tcanvas.width = nw; tcanvas.height = nh; for (var i = 0; i <count; i ++) {for (var J = 0; ctx.DrawImage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.DrawImage (img, 0, 0, 너비, 높이); } // 최소 압축 수행 var ndata = canvas.todataurl ( 'image/jpeg', 0.1); Console.log ( '압축 전 :' + initsize); Console.log ( '압축 후 :' + ndata.length); console.log ( '압축 속도 :' + ~~ (100 * (initsize -ndata.length) / initsize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; NDATA를 반환합니다. } // 그림을 업로드하고 Base64 이미지를 이진 객체로 변환하여 FormData로 채우면 기능 업로드 (Basest, Type, $ 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 = 새로운 xmlhttprequest (); var formdata = getFormData (); formdata.append ( '업로드', 블로브); // KindeDitor 플러그인의 이미지 업로드에 대한 비동기 요청 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", // database URL에 이미지 주소를 삽입하기 위해 struts의 액션 클래스를 비동기로 요청합니다 : "add_article_faceurl.action", datatype : "json", data : "faceurl ="+face_img+"& id ="+id, async : function, function, at sync : "json", datatype : "json" 데이터베이스의 이미지와 관련하여 페이지에 숨겨진 영역에 저장하십시오. }}; // 시뮬레이션 업로드 진행 상황 디스플레이 // 데이터 전송 진행 상황, 처음 50%는 진행 XHR.upload.adeventListener ( 'Progress', function (e) {if (loop) return; prime = ~~ (100 * e.loaded/e.total)/2; $ li.find ( ". width ') (prime = 50); if (pecent =)); mockProgress (); // 데이터의 50% 검색 시뮬레이션 진행 상황 기능 mockProgress () {if (loop) return; loop = setInterVal (function () {cement ++; $ li.Find ( ". 진행 범위"). css ( 'width', prime+"%"); if (pecent == 99) {clearinterval (loop);}}, 100); } xhr.send (formdata); } / ** * Blob Objects * @param buffer * @param format * @returns { *} * / function getBlob (buffer, format) {try {return new blob (buffer, {type : format}); } catch (e) {var bb = new (window.blobBuilder || wind buffer.foreach (function (buf) {bb.append (buf);}); return bb.getBlob (형식); }} / ** * get formData * / function getFormData () {var isneedshim = ~ navigator.useragent.indexof ( 'android') && ~ navigator.vendor.indexof ( 'google') &&! ~ navigator.useragent.indexof ( 'chrome') && navigator.useragent.match (/applewebkit // (/d+)/). pop () <= 534; 반환 isneedshim? New FormDatashim () : New FormData (); } / *** FormData 패치, FormData 업로드 Blobs* @constructor* / fortsole.warn ( 'FormData Shim 사용'); var o = this, parts = [], boundary = array (21) .join ( '-') + ( + new date () * (1e16 * math.random ())). ToString (36), OldSend = XMLHTTPREQUEST.PROTOTYP.SEND; this.append = function (이름, 값, 파일 이름) {parts.push ( '-' + boundary + '/r/ncontent-disposition : form-data; name = "' + name + '"'); if (blob의 값 인스턴스) {parts.push ( '; filename = "' + (filename || 'blob') + '"/r/ncontent-type :' + value.type + '/r/n/r/n'); parts.push (값); } else {parts.push ( '/r/n/r/n' + 값); } parts.push ( '/r/n'); }; // xhr send () xmlhttprequest.prototype.send = function (var) {var fr, data, oxhr = this; if (val === O) {// 최종 경계 문자열 부분을 추가합니다. // 블로브 생성 데이터 = getBlob (parts); // Blob을 설정하여 Blob을 보내기 위해 FR = New Filereader (); fr.onload = function () {OldSend.call (oxhr, fr.result); }; fr.onerror = function (err) {throw err; }; fr.readasarraybuffer (데이터); // 멀티 파트 컨텐츠 유형과 boudary this.setRequestHeader ( 'content-type', 'multipart/form-data; boundary =' + boundary); xmlhttprequest.prototype.send = oldsend; } else {OldSend.call (this, val); }}; } </스크립트>(3) Kindeditor 플러그인의 업로드 이미지 JSP 페이지 관련 코드.
<%@ page language = "java"contmenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <%@ page import = "java.util.*, java.io.*"%> <%@ page import = "java.text.simpledateformat"%> <%@ page@ import = "org.apache.commons.fileupload.*" %> < %@ page import = "org.apache.commons.fileupload.disk.*" %> < %@ page import = "org.apache.commons.fileupload.servlet.*" %> < %@ page import = "org.apache.struts2.dispatcher.multipart.multipartrequestwrapper"%> <%@ page import = "org.json.simple. *"%> <%/** * KindeDitor JSP * *이 JSP 프로그램은 실제 프로젝트에서 직접 사용하지 않는 것이 좋습니다. *이 프로그램을 직접 사용해야하는 경우 사용하기 전에 관련 보안 설정을주의 깊게 확인하십시오. * * /// 파일 저장 디렉토리 경로 string savepath = pagecontext.getServletContext (). getRealPath ( "/") + "첨부/"; // string savepath = "http:///192.168.1.226:8080//qslnbase//uploadfile/" ;//string save "d :/www/qslnadp/adp/webroot/kindeditor/att "GIF, JPG, JPEG, PNG, BMP, BLOB"); extMap.put ( "Flash", "SWF, FLV"); extMap.put ( "Media", "SWF, FLV, MP3, WAV, WMV, MID, AVI, MPG, ASF, RM, RMVB"; ExtMap.put (파일 ","파일 " "DOC, DOCX, XLS, XLSX, PPT, HTM, HTML, TXT, ZIP, RAR, GZ, BZ2"); // 최대 파일 크기 Long MaxSize = 100000; Response.setContentType ( "Text/Html; charset = utf-8"); if (! servletfileupload.ismultipartcontond.ismultiptcond. out.println (getError ( "파일을 선택하십시오.")); return;} // 디렉토리 파일 uploaddir = 새 파일 (savepath); if (! uploaddir.isdirectory ()) {out.println (getError ( "uploaddir.canwrite ()); return;} // 디렉토리를 확인합니다. request.getParameter ( "dir"); if (dirname == null) {dirname = "image";} if (! extmap.containskey (dirname)) {outError ( "dir"directory 이름이 잘못되었다 "); return;} // 폴더 생성 폴더 savepath + = dirname + "/"; saveurl + = dirname + "/"; 파일 savedirfile = 새 파일 (savepath); if (! savedirfile.exists ()) {savedirfile.mkdirs ();} simpledateformat sdf = new simpledateformat ( "yyyymmdd"); string ymd = sdf.format (new date ()); savepath + = ymd + "/" (! dirfile.exists ()) {dirfile.mkdirs ();} // struts2 요청 래퍼 필터 multipartrequestwrapper rapper = (multipartrequestwrapper) 요청; // 업로드 된 파일 이름 string get the up -wapper.getfilenames ( "업로드"); wrapper.getFiles ( "Upload") [0]; // 파일 크기를 확인하면 (file.length ()> maxSize) {out.println (getError ( "파일 크기 업로드 제한을 초과"); return;} // 확장자 문자열 파일 텍스트 1 = filename1.substring (filename1.lastindexof ( ".") + 1) .tolowercase (); // 업로드 파일 이름 simpledateformat df1 = new simpledateformat ( "yyyyymmddhhmmss"); newfilename1 (newfilename1)). "_" + new random (). NextInt (1000) + "." + fileExt1; byte [] buffer = new Byte [1024]; // 파일 출력 스트림 파일 출력 파일 OutputStream fos = savepath + newfilename1); string url = savepath + newfilename1; out.println (url); // memory inputstream에서 현재 파일 입력 스트림을 얻는다. while ((num = in.read (buffer))> 0) {fos.write (buffer, 0, num); }} catch (예외 e) {e.printstacktrace (system.err);} 마지막으로 {in.close (); fos.close ();}%> <%! private String getError (문자열 메시지) {jsonobject obj = new JsonObject (); obj.put ( "오류", 1); obj.put ( "메시지", 메시지); return obj.tojsonstring ();}%>를 반환합니다 ( 4) Kindeditor가 사진을 업로드하기위한 JAR 패키지는 다음과 같습니다.
A.commons-fileupload-1.2.1.jar
B.commons-Io-1.4.jar
c.json_simple-1.1.jar
여기에 사용 된 Kindeditor에 대한 JS 코드는 없습니다. 자세한 내용은 다음을 참조하십시오. Kinditor는 자동 이미지 업로드 기능을 구현합니다.
(5) Kindeditor에 의해 사진을 업로드하기위한 Div는 다음과 같습니다.
<div id = "div2"> <ul> <li id = "Wy"> <img style = "높이 : 100%; 너비 : 100%; 위치 : 절대; 상단 : 0px;" src = "<%= request.getContextPath ()%>/shequ/images/index.png;" > </li> </ul> </div>
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.