이 기사에서는 참조를 위해 3 개의 Java 비동기 업로드 방법을 공유합니다. 특정 내용은 다음과 같습니다
브라우저 플러그인을 사용하여 업로드하는 첫 번째 방법에는 특정 기본 코딩 기술이 필요합니다. 나는 사람들의 아이들을 오도하지 않기 위해 여기서 그것에 대해 이야기하지 않을 것입니다. 이것을 고려하면 스스로 바이두를 할 수 있습니다.
두 번째 유형은 숨겨진 iframe을 사용하여 비동기 업로드를 시뮬레이션합니다 . 왜 우리는 여기서 시뮬레이션에 대해 이야기하고 있습니까? 우리는 실제로 반환 결과를 숨겨진 iframe에 넣었 기 때문에 현재 페이지 점프를 만들지 않았으며, 이는 비동기 조작처럼 느껴졌습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> action = "/upload2"EncType = "multipart/form-data"method = "post"target = "frm"onsubmit = "로드 (true);"> <p id = "upfile"> 첨부 파일 : <입력 유형 = "파일"이름 = "myfile"style = "display : inline"> </p> id = "upbtn"> <input : 50px; 50px; " type="submit" value="asynchronous upload"> <span id="uptxt" style="display: none">Uploading...</span> </p></form><div id="flist" style="border:1px dotted darkgray;"></div><script> // Callback function uploadFinished(fileName) { addToFlist(fileName); 로딩 (false); } 함수 addTofList (fname) {var temp = [ "<p id = ' + fname +"'> ", fname,"<버튼 onclick = 'delfile (/"" + fname + "/");'> delete </button> ","</p> "]; $ ( "#flist"). Append (temp.join ( ""));} 함수 로딩 (showloading) {if (showloading) {$ ( "#uptxt"). show (); } else {$ ( "#uptxt"). 숨기기; }} </script> </body> </html> 이 기술에는 두 가지 핵심 사항이 있습니다.
1. 양식은 대상을 지정하고 제출 된 결과는 숨겨진 iframe로 반환됩니다. (즉, 양식 대상은 iframe의 이름 속성과 일치합니다).
2. 제출이 완료된 후 iframe의 페이지는 메인 페이지와 통신합니다. 업로드 결과 및 서버 파일 정보를 메인 페이지와 통신하는 방법은 무엇입니까?
파일을 수신 한 후 Nodejs를 사용하여 Window.parent에 의해 정의 된 메소드를 반환합니다. 메인 페이지. 실행 후 파일 업로드가 완료되었음을 알 수 있습니다. 코드는 매우 간단합니다.
router.post ( '/upload2', multipartmiddleware, function (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.lastindexof ( '//') + 1); settimeout (function {var ret = [ "<cript>", "window.upload.uploadfinished. " ');", "</script>"]; 실행 후 개발자 옵션을 열 수 있으며 숨겨진 iframe에서 반환 된 일부 데이터가 반환됩니다.
세 번째 유형은 실제 비동기 업로드에 XMLHTTPREQUEST2를 사용합니다.
또는 먼저 코드를 게시하십시오.
실행 후 개발자 옵션을 열 수 있으며 숨겨진 iframe에서 반환 된 일부 데이터가 반환됩니다. 세 번째 유형은 실제 비동기 업로드에 XMLHTTPREQUEST2를 사용합니다. 코드를 먼저 게시합시다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> xhr level2 비동기 업로드 </title> <script type = "text/javaScript"src = "jquery path ..."> </script> </head> <div> <p id = <input "> aT aTCHONT : <input"> id = "myfile"style = "display : inline"> </p> <p id = "upbtn"> <input style = "padding-left : 50px; 패딩-오른쪽 : 50px;" type = "button"value = "Asynchronous Upload"onclick = "업로드;"> <span id = "uptxt"style = "display : none"> 업로드 ... </span> <span id = "upprog"> </span id = "stopbtn"style = ">"> 업로드 중지 </p button> <div id = "style ="sytle = "sytle ="sytle ": DarkGray; "> </div> <cript> 함수 업로드 {// 1. FormData var fd = new FormData; fd.append ( "myfile", $ ( "#myfile") [0] .files [0]); // XHR 개체 생성 var xhr = new xmlhttprequest; // 상태를 듣고 실시간으로 응답 // xhr 및 xhr.upload가 진행되고, xhr.progress는 다운로드 진행 상황, xhr.upload.progress는 업로드 진행 상황 xhr.upload.onprogress = function (event) {if (event.length computable) {event.loaded * 100 / event.total); Console.log ( '%d%', 백분율); $ ( "#upprog"). 텍스트 ( %); }}; // 전송 시작 이벤트 xhr.onloadStart = function (event) {console.log ( 'load start'); $ ( "#upprog"). 텍스트 ( '시작 업로드'); $ ( "#stopbtn"). 로딩 (true); }; // ajax 프로세스는 이벤트 xhr.onload = function (event) {console.log ( 'load success')를 성공적으로 완료했습니다. $ ( "#upprog"). 텍스트 ( '업로드 성공'); console.log (xhr.responsetext); var ret = json.parse (xhr.responsetext); addToflist (ret.fname); }; // ajax process xhr.onerror = function (event) {console.log ( 'error')에서 오류 이벤트가 발생했습니다. $ ( "#upprog"). 텍스트 ( '오류가 발생 함'); }; // ajax는 취소 xhr.onabort = function (event) {console.log ( 'abort'); $ ( "#upprog"). text ( '조작이 취소되었습니다'); }; //로드 전송이 종료되면 성공 또는 실패에 관계없이 트리거됩니다 xhr.onloadend = function (event) {console.log ( 'load end'); 로딩 (false); }; // 데이터 xhr.open ( 'post', '/upload3', true)를 전송하기위한 ajax 요청을 시작합니다. xhr.send (fd); } 함수 addTofList (fname) {var temp = [ "<p id = ' + fname +"'> ", fname,"<버튼 onclick = 'delfile (/"" + fname + "/");'> delete </button> ","</p> "]; $ ( "#flist"). Append (temp.join ( "")); } function delfile (fname) {console.log ( '파일 삭제 :' + fname); // todo : please unuble} function loading (showloading) {if (showloading) {$ ( "#uptxt"). show (); $ ( "#stopbtn"). show (); } else {$ ( "#uptxt"). hide (); $ ( "#stopbtn"). hide (); }} </script> </body> </html> 코드가 많지만 이해하기 쉽습니다. AJAX를 사용한 사람은 XHR 객체가 전체 요청/응답 프로세스를 듣기 위해 on readreadeChange 콜백 메소드를 제공한다는 것을 알고 있습니다. XMLHTTPREQUEST 레벨 2 사양에는 몇 가지 더 진행된 이벤트가 있습니다. 아래에는 6 개의 이벤트가 있습니다.
1.로드 스타트 : 응답 데이터의 첫 바이트가 수신되면 트리거됩니다.
2. 프로그램 : 응답 수신 중에 지속적으로 트리거됩니다.
3.Error : 요청에서 오류가 발생하면 트리거됩니다.
4. 아버트 : abort 메소드를 호출하여 연결이 종료 될 때 트리거됩니다.
5.로드 : 전체 응답 데이터가 수신되면 트리거됩니다.
6.로드 : 통신이 완료되거나 오류, 중단,로드 이벤트가 트리거 된 후 트리거됩니다.
이번에는 코드를 해석 할 수 있습니다. 전송 이벤트가 시작되면 전송 스톱 전송 버튼에 클릭 이벤트를 추가하고 내장 abort 메소드가 전송을 중지 할 수 있습니다. 클릭하지 않으면 전송이 완료 될 때까지 정상적으로 업로드됩니다. 배경 코드는 두 번째 방법과 유사합니다.
세 가지 방법에는 고유 한 장점과 단점이 있으며 간단한 요약을하겠습니다.
타사 컨트롤은 상호 작용과 제어 성이 우수하고 바닥 층에 가깝고 성능도 우수하기 때문에 우수합니다. 그러나 글을 쓰기가 어렵 기 때문에 일반적으로 플러그인을 직접 설치해야하며 때로는 직접 작성해야 할 수도 있습니다.
나는 개인적으로 숨겨진 iframe 방법이 매우 사려 깊은 방법이라고 생각합니다. Iframe은 우리가 많은 일을하는 데 도움이 될 수 있습니다. 이 접근법에는 광범위한 브라우저 호환성이 있으며 플러그인을 설치할 필요가 없습니다. 그러나 상호 작용이 열악하고 통제 할 수없는 업로드 프로세스가 있으며 성능도 매우 평균적입니다.
XHR2 레벨 PURE AJAX 업로드의 경우 더 높은 버전 (IE9+)이있는 브라우저가 있어야합니다. 그러나 그것은 매우 좋은 대화식을 가지고 있으며, 업로드 진행 상황을 볼 수 있으며 제어 할 수 있습니다.
개발은 요구 사항에 따라 다르게 수행 할 수 있습니다. 나는 개인적으로 이러한 파일, 특히 두 번째 파일을 업로드하는 것이 일종의 아이디어를 제공한다고 생각합니다.이 아이디어는 특정 HTML 태그의 특성을 완전히 활용하는 것이 개발자가 더 많이 생각 해야하는 것일 수 있다고 생각합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.