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'、//ファイルのアップロードを処理するサーバーは、secureuri：false、// falsed、// //データ型：テキスト、XML、JSON、HTML、SCRITP、JSONP 5つの成功：function（data）{alert（data.file_infor）}）; </script> <input> <input> <inpul ajaxfileupload（）; ">アップロード</button>バックグラウンドdoajaxfileupload.phpスクリプト：
<？php $ upfilepath = "../attachment/"; $ ok=@move_uploaded_file($_files ['img'] if（$ ok === false）{echo json_encode（ 'file_infor' => 'upload failed'）; } else {echo json_encode（ 'file_infor' => 'uploaded uploaded upload'）; }？>テストの場合、次の方法と同様の方法で合格変数値を保存できます。
$ file_info = var_export（$ _ files、true）;
$ ok = file_put_contents（ "../ attachment/file_info.txt"、$ file_info）;
if（$ ok）exit（json_encode（ 'file_infor' => 'uploaded uploaded upload'））;
exit（json_encode（ 'file_infor' => 'アップロードfailed'））;
※ 知らせ
HTMLコードファイルボックスのマークに注意してください：
1。ID= 'IMG'は、ajaxfileupload.jsプラグインのfileElementId： 'img'を識別するために使用されます。 jQueryセレクターは、この文字列を使用してテキストボックスの値を取得します。
2。NAME= 'IMG'は、$ _FILES ['IMG']を介してアップロードされたファイルデータを読み取るために使用されます。この値が利用できない場合、$ _files変数は空です。
したがって、これらの2つの値の両方は不可欠であり、混乱することはできません。
3。追加のパラメーターをサポートします
バックグラウンドの特定の変数に基づいて、アップロードされたファイルを処理する必要がある場合があります。たとえば、ファイルを更新します。この時点で、いくつかの追加のパラメーターを同じ段階に渡す必要があります。そこで、ajaxfileupload.jsプラグインを変更しました。
addtherrequestStoform：function（form、data）{//追加パラメーターvar originalelement = $（ '<入力型= "hidden" name = "" value = "">'）; for（データのvarキー）{name = key; value = data [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.adddotherRequestStoform（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_in' => 'uploaded ecsurcefully'）; exit（json_encode（ 'file_infor' => 'アップロードfailed'））;
原則は非常に単純であることがわかります。これは、追加のデータオブジェクトコンテンツをiframeの下のフォームに追加し、バックグラウンドPHPスクリプトに渡し、$ _Requestなどの変数でこれらの値を取得することです。
バックグラウンド出力に保持されているfile_info.txtコンテンツは次のとおりです。
配列 （
「ファイル」=>
配列 （
'name' => 'firefox-java.txt'、
'type' => 'text/plain'、
'tmp_name' => 'd：//tools//xampp//tmp//phped45.tmp'、
「エラー」=> 0、
「サイズ」=> 250、
）、、
0 =>
配列 （
'test' => 'test'、
'ok' => 'ok'、
'phpsessid' => 'e379fd4fb2abca6e802a1302805a5535'、
）、、
））
ajaxfileupload.js：
jquery.extend（{createuploadiframe：function（id、uri）{// create framevarid = 'juploadframe' + id; if（window.activexobject）{var io = document.createelement（ '<iframe id = "' + frameid + '" "name ="' + frameid + '）; '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.Style.Style.Style.Styleid; 'Absolute'; io.style.top = '-1000px'; io.style.body.appendchild（io）、return function（id、fileelementid） $（form Action = "" post "name =" ' + formid +' "enctype/form-data = </form> '） $（oldelement）.beer（newElement）; $（form）.css（ 'top'、 '-1200px'）; $（form）.css（ 'left'、 '-1200px'）; $（form）.appendto（ 'body'）;フォームを返します。 }、addotherRequestStoform：function（form、data）{//追加パラメーターvar originalelement = $（ '<input inge = "hidden" name = "" value = "">'）; for（データのvarキー）{name = key; value = data [key]; var cloneelement = originalelement.clone（）; cloneElement.attr（{'name'：name、 'value'：value}）; $（cloneElement）.appendto（form）; } return form; }、ajaxfileupload：function（s）{// todoはグローバル設定を導入し、クライアントがすべてのリクエストに対してそれらを変更できるようにします。タイムアウトs = jquery.extend（{}、jquery.ajaxsettings、s）; var id = new date（）。gettime（）var form = jquery.createuploadform（id、s.fileelementid）; if（s.data）form = jquery.adddotherRequestStoform（form、s.data）; var io = jquery.createuploadiframe（id、s.secureuri）; var frameid = 'juploadframe' + id; var fordid = 'juploadform' + id; //（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.document.document.document.body.body.document.document.body.body.document.body.document.body.document.body.document.body 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"？ "success"： "error"; //リクエストが成功したか、modifiedif（status！= "error"）{//データを処理します（コールバックに関係なくhttpdataを介してxmlを実行） //ローカルコールバックが指定されている場合は、それを発射して渡して渡します（s.success）s.success（data、status）; // Global Callbackif（s.global）jquery.event.trigger（ "ajaxsuccess"、[xml、s]）; "error"; jquery.handleerror（s、xml、status、e）;} //リクエストはcompleteif（s.global）jquery.event.trigger（ "ajaxcomplete"、[xml、s]）; //グローバルAjax counterif（s.global &&！-jquery.active）jquery.event.trigger（ "ajaxstop"）; //プロセス結果（s.complete）s.complete（xml、status）; jQuery（io）.unbind（）setimeout（function（）{try {$（io）.remove（）; $（form）.remove（）;} catch（e）{jquery.handleerror（s、xml、null、e）;}}、100）xml}}} {settimeout（function（）{//リクエストがまだ起こっているかどうかを確認してください（！requestdone）uploadCallback（ "Timeout"）;}、S.Timeout）; } try {// var io = $（ '＃' + frameid）; var form = $（ '＃' + formid）; $（form）.attr（ 'action'、s.url）; $（form）.attr（ 'method'、 'post'）; $（form）.attr（ 'ターゲット'、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（window.attachevent）{document.getElementById（frameid）.attachevent（ 'onload'、uploadcallback）; } 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'））;}））;データを返す; }}）