PHP이든 다른 서버 측 스크립트이든, 파일 업로드 기능을 제공하는데, 이는 구현하기가 비교적 간단합니다. JavaScript를 사용하여 협력하여 Ajax 파일 업로드를 실현할 수 있습니다. jQuery 자체는 이러한 단순화 된 기능을 제공하지 않지만 구현할 수있는 많은 플러그인이 있습니다. 그중에서도 phpletter.com에서 제공하는 ajaxfileupload.js는 가벼운 플러그인이며, 쓰기 방법은 jQuery에서 제공하는 전역 메소드 $ .post ()와 매우 유사하며 간단하고 사용하기 쉽습니다.
그러나이 플러그인은 너무 단순화되었습니다. 파일 업로드 경로를 제공하는 것 외에도 추가 값을 백그라운드 서버로 전달할 수는 없습니다. 스크립트를 수정하고 데이터 객체 매개 변수를 추가했습니다.
1. 원리
PHP를 서버 측 스크립트로 사용하고 있습니다. PHP가 적은 거의 모든 책에서는 Move_uploaded_file () 메소드를 사용하여 파일을 업로드하는 방법을 언급 할 것입니다. 여기에서 자세히 설명하지 마십시오. 내가 말하고 싶은 것은 Ajax 업로드의 원리를 사용하는 것입니다.
jQuery 라이브러리를 사용하고 있었기 때문에 Ajax를 생각할 때 첫 번째 반응은 $ .post () 메소드를 시도하고 각 선택기를 사용하여 파일 파일 상자에서 값 값을 얻은 다음 배경 서버에 제출하는 것입니다. 물론, 이것이 불가능하다는 것이 밝혀졌습니다. (이 문제로 인해 많은 정보를 확인하고 인터넷에서 ASP와 같은 많은 스크립트를 제공했습니다. 실제로 무엇을 말 해야할지 모르겠습니다.)
주제로 돌아가서 실제로 Ajax를 업로드하는 것은 어렵지 않으며 많은 방법이 있습니다. 이 기사에서 언급 한 phpletter.com 용 Ajaxfileupload.js 플러그인은 iframes를 사용하는 방법입니다. 이것은 JavaScript 스크립트를 사용하지 않고 페이지를 새로 고치지 않고 업로드 할 때 일반적인 방법입니다. (이 방법은이 블로그의 Bo-Blog 배경에 로그를 작성하는 데 사용됩니다)
ajaxfileupload.js 플러그인도 매우 간단합니다. 먼저 jQuery 선택기를 사용하여 파일 업로드 상자에서 파일 경로 값을 얻은 다음 iframe을 동적으로 작성한 다음 내부에 새 파일 상자를 작성하여 게시물 메소드를 제공하여 배경에 제출합니다. 마지막으로 결과를 프론트 데스크로 돌아갑니다.
2. 사용
ajaxfileupload.js 플러그인을 사용하는 것은 매우 간단합니다.
프론트 데스크 HTML 코드는 비슷합니다.
<script type = "text/javaScript"> $ (#buttonUplod) .click (function () {$ .ajaxFileUpload ({url : 'doajaxfileupload.php', // 파일 업로드를 처리하는 서버는 파일에 해당하는 ID 값이 파일에 해당하는 파일에 해당합니다. // 데이터 유형 : 텍스트, XML, JSON, HTML, SCRITP, JSONP 5 가지 성공 : alert (data.file_infor)}); </script> <input id = "file"size = "45"name = "img"> ajaxfileupload (); "> 업로드 </button>배경 doajaxfileupload.php 스크립트 :
<? php $ upfilepath = "../attachment/" ;$OK=@move_uploaded_file($_files ];'tmp_name' ],$upfilepath); if ($ ok === false) {echo json_encode ( 'file_infor'=> '업로드 실패'); } else {echo json_encode ( 'file_infor'=> '성공적으로 업로드'); }?>테스트의 경우 다음과 비슷한 방식으로 전달 된 가변 값을 저장할 수 있습니다.
$ file_info = var_export ($ _ files, true);
$ OK = FILE_PUT_CONTENTS ( "../ 첨부 파일/file_info.txt", $ file_info);
if ($ OK) EXIT (JSON_ENCODE ( 'file_infor'=> '성공적으로 업로드');
종료 (json_encode ( 'file_infor'=> '업로드 실패');
※ 알아채다
HTML 코드 파일 상자의 마크에 주목하십시오.
1. id = 'IMG'는 ajaxfileupload.js 플러그인의 fileElementId : 'IMG'를 식별하는 데 사용됩니다. jQuery 선택기는이 문자열을 사용하여 텍스트 상자의 값을 얻습니다.
2. 이름 = 'IMG'는 게시물을 통해 배경 스크립트에 제출할 때 $ _files [ 'IMG']를 통해 업로드 된 파일 데이터를 읽는 데 사용됩니다. 이 값을 사용할 수없는 경우 $ _files 변수가 비어 있습니다.
따라서이 두 값은 모두 필수 불가능하며 혼란 스러울 수 없습니다.
3. 추가 매개 변수를 지원합니다
때로는 백그라운드의 특정 변수를 기반으로 업로드 된 파일을 처리해야합니다. 예를 들어 파일을 업데이트하십시오. 현재 추가 매개 변수를 동일한 단계로 전달해야합니다. 그래서 AjaxFileUpload.js 플러그인을 수정했습니다.
addotherRequestStoform : 함수 (form, data) {// 추가 매개 변수 추가 var originalElement = $ ( '<input type = "hidden"name = ""value = "">'); for (data in data in data) {name = key; 값 = 데이터 [키]; var cloneElement = originalElement.clone (); cloneElement.attr ({ 'name': name, 'value': value}); $ (cloneElement) .appendto (form); } return form;}, ajaxfileUpload : function (s) {// todo는 글로벌 설정을 소개하여 클라이언트가 모든 요청에 대해 모든 요청에 대해 수정할 수 있도록 허용합니다. var id = new date (). gettime () var form = jQuery.createUploadform (id, s.fileElementId); if (s.data) form = jquery.addotherrequeststoform (form, s.data); var io = jquery.createuploadiframe (id, s.secureuri);빨간색 표시 부분은 내가 추가 한 것입니다. 이 방법으로 아래와 같은 코드를 통해 전경 HTML 섹션에서 추가 매개 변수를 전달할 수 있습니다.
URL : 'doajaxfileupload.php', // 파일 업로드를 처리하는 서버
Secureuri : False, // 페이지 처리 코드의 파일에 해당하는 ID 값
데이터 : { 'test': 'test', 'ok': 'ok'}, // 객체에 전달되며 컨텐츠 부분이 JavaScript의 변수 값을 입력 할 수 있습니다.
FileElementId : 'img',
배경 처리 스크립트는 다음과 같습니다.
array_push ($ _ files, $ _ request); $ file_info = var_export ($ _ files, true); $ ok = file_put_contents ( "../ attachment/file_info.txt", $ file_info); if ($ ok) Exit (JSON_ENCODE ( 'file_infor'=> 'UPENCEST')); 종료 (json_encode ( 'file_infor'=> '업로드 실패');
원리가 매우 간단하다는 것을 알 수 있습니다. 이는 Iframe의 형식에 추가 데이터 객체 컨텐츠를 추가하고 배경 PHP 스크립트로 전달하고 $ _request와 같은 변수로 이러한 값을 얻는 것입니다.
백그라운드 출력에 보관 된 file_info.txt 컨텐츠는 다음과 같습니다.
배열 (
'파일'=>
배열 (
'name'=> 'firefox-java.txt',
'type'=> 'text/plain',
'tmp_name'=> 'd : //tools//xampp//tmp//phed45.tmp',
'오류'=> 0,
'크기'=> 250,
),)
0 =>
배열 (
'테스트'=> '테스트',
'OK'=> 'OK',
'phpsessid'=> 'e379fd4fb2abca6e802a1302805a5535',
),)
))
ajaxfileupload.js :
jQuery.extend ({createuploadiframe : function (id, uri) {// framevar frameid = 'juploadframe' + id; if (wind 'boolean') {io.src = 'javaScript : false';} else if (typeof uri == 'string') {io.src = uri;}} else {var io = document.createElement ( 'iframe'); io.id = frameid; io.name = frameid;} io.poction. '-1000px'; io.style.left = '-1000px'; 'id = "' + cormid + '"EncType = "multipart/form-data"> </form>'); var oldlement = $ ( '#' + fileElementId); var newlement = $ (OldElement) .Clone (); $ (Oldelement) .attr ( 'id', fileId); $ (OldElement); $ (OldEment); $). 속성 $ (form) .css ( '위치', '절대'); $ (form) .css ( 'top', '-1200px'); $ (form) .css ( '왼쪽', '-1200px'); $ (form) .appendto ( 'body'); 반환 양식; }, addotherRequestStoform : 함수 (form, data) {// 추가 매개 변수 추가 var originalElement = $ ( '<input type = "hidden"name = ""value = "">'); for (data in data in data) {name = key; 값 = 데이터 [키]; var cloneelement = originalElement.clone (); cloneElement.attr ({ 'name': 이름, 'value': value}); $ (cloneElement) .appendto (form); } 반환 양식; }, ajaxfileUpload : function (s) {// todo는 글로벌 설정을 도입하여 클라이언트가 모든 요청에 대해 모든 요청에 대해 수정할 수 있도록 허용합니다. var id = new date (). gettime () var form = jQuery.createUploadform (id, s.fileElementId); if (s.data) form = jquery.addotherrequeststoform (form, s.data); var io = jquery.createuploadiframe (id, s.secureuri); var frameid = 'juploadframe' + id; var formid = 'juploadform' + id; // if (s.global &&! jQuery.Active ++) {jQuery.event.trigger ( "ajaxstart"); } var requestDone = false; // 요청 객체 생성 객체 생성 var xml = {} if (s.global) jquery.event.trigger ( "ajaxsend", [xml, s]); // 응답이 var uploadcallback = function (istimeout)을 기다릴 때까지 기다립니다 {var io = document.getElementByid (frameid); try {if (io.contentwindow) {xml.responsetext = io.contentwindow.body? io.contentwindow.document.body.innerhtml; xml.responsexml = io.contentwindow.document.xmldocument? io.contentwindow.document.xmldocument : io.contentwindow.document; } else if (io.contentDocument) {xml.responsetext = io.contentDocument.document.body? io.contentDocument.document.body.innerhtml : null; xml.responsexml = io.contentDocument.document.xmldocument? io.contentDocument.document.xmldocument : io.contentDocument.document; }} catch (e) {jquery.handleerror (s, xml, null, e); } if (xml || istimeout == "timeout") {requestDone = true; var status; try {status = istimeout! = "timeout"? "성공": "오류"; // 요청이 성공적이거나 modifiedif인지 확인하십시오 (상태! = "error") {// 데이터 처리 (콜백에 관계없이 httpdata를 통해 XML을 실행) var data = jquery.uploadhttpdata (xml, s.datatype); // 로컬 콜백이 지정된 경우, Dataif (s.success) s.success (data, status); // Global Callbackif (s.global) jquery.event.trigger ( "ajaxsuccess", [xml, s]); "error"; jQuery.HandleError (S, XML, 상태, E);} // 요청은 완료 (s.global) jQuery.event.trigger ( "ajaxComplete", [xml, s]); // 글로벌 AJAX CORSORIFIF (S.GLOBAL &&! --JQUERY.ACTIVE) jQuery.event.trigger ( "AjaxStop")를 처리합니다. // 프로세스 결과 (s.complete) s.complete (xml, status); jquery (io) .unbind () settimeout (function () {try {$ (io) .remove (); $ (form) .remove ();} catch (e) {jquery.handleerror (s, xml, null, e);}}, 100) xml = null}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}. {settimeout (function () {// 요청이 여전히 발생하는지 확인하십시오. } try {// var io = $ ( '#' + frameid); var form = $ ( '#' + cormid); $ (form) .attr ( 'action', s.url); $ (form) .attr ( 'method', 'post'); $ (form) .attr ( 'target', frameid); if (form.encoding) {form.encoding = 'multipart/form-data'; } else {form.enctype = 'multipart/form-data';} $ (form) .submit (); } catch (e) {jQuery.handleError (s, xml, null, e); } if (wind } else {document.getElementById (frameid) .addeventListener ( 'load', uploadcallback, false); } return {abort : function () {}}; }, uploadhttpData : function (r, type) {var data =! type; data = type == "xml"|| 데이터? R.Responsexml : R.Responsetext; // 유형이 "스크립트"인 경우 (type == "script") jquery.globaleval (data); // JSON을 사용하는 경우 JavaScript 객체를 가져옵니다. if (type == "json") Eval ( "data =" + data); // html if (type == "html") jQuery ( "<div>"). html (data) .evalscripts (); // alert ($ ( 'param', data) .Each (function () {alert ($ (this) .attr ( 'value')))); 반환 데이터; }})