PHP+ajax画像ファイル非同期アップロードサンプルコード-PHPチュートリアル-php.cn

jQuery.extend({
createUploadIframe: function(id, uri)
{
//フレームを作成
var FrameId = 'jUploadFrame' + id;
var iframeHtml = 'if(window.ActiveXObject)<li>{<li>if(typeof uri) == 'boolean'){<li>iframeHtml += ' src="' + 'javascript:false' + '"';<li>}<li>else if(typeof uri== 'string'){<li>iframeHtml += ' src=" ' + uri + '"';<li>} <li>}<li>iframeHtml += ' />';</li> <li>jQuery(iframeHtml).appendTo(document.body);</p></li> <li><p>return jQuery('# ' + FrameId).get(0);</li> <li> }, // bbs.it-home.org</li> <li> createUploadForm: function(id, fileElementId)</li> <li> {</li> <li>//フォームを作成</li> <li>var formId = 'jUploadForm' + id;</li> <li>var fileId = 'jUploadFile' + id;</li> <li>var form = jQuery('<form action="" Method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/ form-data"></form>'); </li> <li>var oldElement = jQuery('#' + fileElementId);</li> <li>var newElement = jQuery(oldElement).clone();</li> <li>jQuery(oldElement).attr('id ', fileId);</li> <li>jQuery(oldElement).before(newElement);</li> <li>jQuery(oldElement).appendTo(form);</li> <li>//追加パラメータサポート</li> <li>if(data){</li> <li>$.each(data,function(key, value){</li> <li> $("<input type='hidden' name='"+key+"' value='"+value+"'/>").appendTo(form);</li> <li>})</li> <li>}</li> <li>//属性を設定</li> <li>jQuery(form).css('position', 'absolute');</li> <li>jQuery(form).css('top', '-1200px');</li> <li>jQuery(form).css('left', ' -1200px');</li> <li>jQuery(form).appendTo('body');</li> <li>return form;</li> <li> },</p></li> <li><p> ajaxFileUpload: function(s) {</li> <li> // TODO グローバル設定を導入し、クライアントがタイムアウトだけでなくすべてのリクエストに対して設定を変更できるようにします</li> <li> s = jQuery.extend({}, jQuery.ajaxSettings, s);</li> <li> var id = new Date().getTime() </li> <li>var form = jQuery.createUploadForm(id, s.fileElementId,s.data);</li> <li>var io = jQuery.createUploadIframe(id, s.secureuri);</li> <li>var FrameId = 'jUploadFrame' + id ;</li> <li>var formId = 'jUploadForm' + id;</li> <li> // 新しいリクエストのセットを監視します</li> <li> if ( s.global && ! jQuery.active++ )</li> <li>{</li> <li>jQuery.event.trigger( "ajaxStart" );</li> <li>} </li> <li> var requestDone = false;</li> <li> // リクエストオブジェクトを作成します</li> <li> var xml = {} </li> <li> if ( s.global )</li> <li> jQuery.event.trigger("ajaxSend", [xml, s]);</li> <li> // 応答を待ちます戻ってくる</li> <li> var UploadCallback = function(isTimeout)</li> <li>{</li> <li>var io = document.getElementById(frameId);</li> <li>試してください</li> <li>{ </li> <li> if(io.contentWindow)</li> <li> {</li> <li> xml.responseText = io.contentWindow.document.body? io.contentWindow.document.body.innerHTML:null;</li> <li> xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;</li> <li> </li> <li> }else if(io.contentDocument)</li> <li> {</li> <li> xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;</li> <li> xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument .document;</li> <li> }</li> <li> }catch(e)</li> <li>{</li> <li> jQuery.handleError(s, xml, null, e);</li> <li>}</li> <li> if ( xml || isTimeout == "タイムアウト") </li> <li>{ </li> <li>requestDone = true;</li> <li>var status;</li> <li>try {</li> <li> status = isTimeout != "タイムアウト" ? "success" : "error";</li> <li> // リクエストが成功したか、変更されていないことを確認します</li> <li> if ( status != "error" )</li> <li>{</li> <li> // データを処理します (コールバックに関係なく httpData を通じて xml を実行します)</li> <li> varデータ = jQuery.uploadHttpData( xml, s.dataType ); </li> <li> // ローカルコールバックが指定されている場合は、それを起動してデータを渡します</li> <li> if ( s.success )</li> <li> s.success( data, status );</li> <li> </li> <li> // グローバルコールバックを起動します</li> <li> if( s.global )</li> <li> jQuery.event.trigger( "ajaxSuccess", [xml, s] );</li> <li> } else</li> <li> jQuery.handleError(s, xml, status);</li> <li>} catch(e) </li> <li> {</li> <li> status = "error";</li> <li> jQuery. handleError(s, xml, status, e);</li> <li>}</p></li> <li><p>// リクエストが完了しました</li> <li>if( s.global )</li> <li> jQuery.event.trigger( "ajaxComplete", [xml, s] );</p></li> <li><p&gt ;// グローバル AJAX カウンターを処理します</li> <li>if ( s.global && ! --jQuery.active )</li> <li> jQuery.event.trigger( "ajaxStop" );</p></li> <li><p>// 結果を処理します</li> <li>if ( s.complete )</li> <li> s.complete(xml, status);</p></li> <li><p>jQuery(io).unbind()</p></li> <li><p>setTimeout(function()</li> <li>{試してみてください </li> <li> {</li> <li>jQuery(io).remove();</li> <li>jQuery(form).remove(); </p></li> <li><p> } catch(e) </li> <li> {</li> <li>jQuery.handleError(s, xml, null) 、e);</li> <li> }</p></li> <li><p>}、100)</p></li> <li><p>xml = null</p></li> <li><p> }</li> <li> }</li> <li> // タイムアウトチェッカー</li> <li> if ( s.timeout > 0 ) </li> <li>{</li> <li> setTimeout(function(){</li> <li>// リクエストがまだ発生しているかどうかを確認します</li> <li>if( !requestDone ) UploadCallback( "timeout" );</li> <li> }, s.timeout);</li> <li> }</li> <li> 試してみてください </li> <li>{</p></li> <li><p>var form = jQuery('#' + formId);</li> <li>jQuery(form).attr('action', s.url);</li> <li>jQuery(form).attr('method', 'POST');</li> <li>jQuery(form).attr('target', FrameId);</li> <li> if(form.encoding)</li> <li>{</li> <li> jQuery(form ).attr('エンコーディング', 'マルチパート/フォームデータ'); </li> <li> }</li> <li> else</li> <li>{ </li> <li> jQuery(form).attr('enctype', 'multipart/form-data');</li> <li> }</li> <li> jQuery(form).submit();</p></li> <li><p> } catch(e) </li> <li>{</li> <li> jQuery.handleError(s, xml, null, e);</li> <li> }</p></li> <li><p>jQuery('#' + FrameId).load(uploadCallback );</li> <li> return {中止: 関数 () {}}; </p></li> <li><p> }、</p></li> <li><p> UploadHttpData: function( r, type ) {</li> <li> var data = !type;</li> <li> data = type == "xml" ||データ？ r.responseXML : r.responseText;</li> <li> // タイプが "script" の場合、グローバルコンテキストで評価します</li> <li> if ( type == "script" )</li> <li> jQuery.globalEval( data );</li> <li> // JavaScript オブジェクトを取得します。 JSON が使用されている場合。</li> <li> if ( type == "json" )</li> <li> eval( "data = " + data );</li> <li> // html 内のスクリプトを評価します</li> <li> if ( type == "html" )</li> <li> jQuery("<div&gt ;").html(data).evalScripts();</p></li> <li><p> データを返す;</li> <li> }</li> <li>})</p></li> <li> </ol></div> <em onclick="copycode($('code_lld'));">复制代</em> </div> <p>过程： (1 ) 前端文の代コード： test.php </p> <div class="blockcode"> <div id="code_KUI"><ol> <li> <li><script type="text/javascript" src="jquery.js"></script> </li> <li> <script type="text/javascript" src="ajaxfileupload.js"></script></li> <li> <script type="text/javascript"></li> <li> 関数 ajaxFileUpload()</li> <li>{</li> <li>$.ajaxFileUpload</li> <li> (</li> <li> {</li> <li> url:'doajaxfileupload.php', //処理上传文件の服务端</li> <li> secureuri:false,</li> <li> fileElementId:'img',</li> <li> dataType: 'json',</li> <li> success: function (data)</li> <li> {</li> <li> alert(data.file_infor);</li> <li> }</li> <li> }</li> <li> )</li> <li> return false;</li> <li> } </li> <li> </script></li> <li> </li> </ol></div> <em onclick="copycode($('code_KUI'));">复制代</em> </div> <p>相应のHTMLは： </p> <div class="blockcode"> <div id="code_FLd"><ol> <li> <li><input id="img" type="file" size="45" name="img" class="input"></li> <li> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">アップロード</button></li> <li> </li> </ol></div> <em onclick="copycode($('code_FLd'));">复制番号</em> </div> <p>このゲスト端末は完了しました。</p> <p>(2) サービス端末にあるdoajaxfileupload.php これは、転送値が正しいかどうかを簡単に検出するために保存されていてもよい。 </p> <div class="blockcode"> <div id="code_f1K"><ol> <li> <li>$file_infor = var_export($_FILES,true);</li> <li> file_put_contents("d:file_infor.php".$file_infor);</li> <li> </li> </ol></div> <em onclick="copycode($('code_f1K'));">复制發</em> </div> <p>打来刚生成のfile_infor.php文件時，又看到了熟尽的信息了： </p> <div class="blockcode"> <div id="code_h5h"><ol> <li> <li>array(</li> <li> 'name'=>'lamp.jpg',</li> <li> 'type'=>'image/pjpeg',</li> <li> 'tmp_name'=>'c:windowstempphpFA.tmp',</li> <li> 'error'=>0,</li> <li> 'size'=>3127</li> <li>)</li> <li> </li> </ol></div> <em onclick="copycode($('code_h5h'));">复制代</em> </div> <p>もちろん、実際の処理は次のようになります。 </p> <div class="blockcode"> <div id="code_EiQ"><ol> <li> <li><?php<li> $upFilePath = "d://";<li> $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);<li>if($ok = == FALSE){<li> echo json_encode('file_infor'=>'アップロード失敗');</li> <li>}else{</li> <li> echo json_encode('file_infor'=>'アップロード成功');</li> <li>}</li> <li>?></li> </ol></div> <em onclick="copycode($('code_EiQ'));"> コードをコピーします </em> </div> <p>方法 2、iframe フレームワークを使用して画像をアップロードします htmlコード: </p> <div class="blockcode"> <div id="code_ImA"><ol> <li> <li><div class="frm"></li> <li> <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype=" multipart/form-data"></li> <li> <input type="file" id="upload_file" name="upfile"></li> <li> </form></li> <li> <iframe src="" width="0" height= "0" style="display:none;" name="tarframe">