jquery ajax と php を使用して画像をアップロードする方法について説明しました。次に、php ajax を使用して、更新せずにさまざまなファイルをアップロードする方法を紹介します。これがすべての学生に役立つことを願っています。 一括で追加・アップロードできるので簡単で便利です コードは次のとおりです コードをコピー </p> <p><br> jQuery.extend({<br> <br> </p> <p> createUploadIframe: function(id, uri)<br> {<br> //フレームを作成<br> var FrameId = 'jUploadFrame' + id;<br> var iframeHtml = '<iframe id="' + FrameId + '" name="' + FrameId + '" style="position:absolute; top:-9999px; left:-9999px"';<br /> If(window.ActiveXObject)<br /> {<br /> If(uri のタイプ== 'ブール'){<br /> iframeHtml += ' src="' + 'javascript:false' + '"';<br /> </p> <p> }<br /> else if(typeof uri== 'string'){<br /> iframeHtml += ' src="' + uri + '"';<br /> </p> <p> }<br /> iframeHtml += ' />';<br> jQuery(iframeHtml).appendTo(document.body);<br> <br> </p> return jQuery('#' + FrameId).get(0); }、<p> createUploadForm: function(id, fileElementId, data)<br> {<br> //フォームを作成する <br> var formId = 'jUploadForm' + id;<br> var fileId = 'jUploadFile' + id;<br> var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></フォーム>'); if(データ)<br /> {<br /> for(データ内の変数 i)<br /> {<br /> jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);<br> var oldElement = jQuery('#' + fileElementId);<br> var newElement = jQuery(oldElement).clone();<br> jQuery(oldElement).attr('id', fileId);<br> jQuery(oldElement).before(newElement);<br> jQuery(oldElement).appendTo(form);<br> <br> <br> <br></p> <p> <br> // 属性を設定します<br> jQuery(フォーム).css('位置', '絶対');<br> jQuery(フォーム).css('top', '-1200px');<br> jQuery(フォーム).css('left', '-1200px');<br> jQuery(フォーム).appendTo('body'); <br> 返品フォーム;<br> }、<br> </p> <p> ajaxFileUpload: 関数 {<br> // TODO はグローバル設定を導入し、クライアントがタイムアウトだけでなくすべてのリクエストに対して設定を変更できるようにします <br> s = jQuery.extend({}, jQuery.ajaxSettings, s);<br> var id = new Date().getTime() <br> var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='未定義'?false:s.data));<br> var io = jQuery.createUploadIframe(id, s.secureuri);<br> var FrameId = 'jUploadFrame' + id;<br> var formId = 'jUploadForm' + id; <br> // 新しいリクエストのセットに注目してください<br> if ( s.global && ! jQuery.active++ )<br> {<br> jQuery.event.trigger( "ajaxStart" );<br> } <br> var requestDone = false;<br> // リクエストオブジェクトを作成します<br> var xml = {} <br> if ( s.global )<br> jQuery.event.trigger("ajaxSend", [xml, s]);<br> // 応答が返ってくるまで待ちます<br> var UploadCallback = function(isTimeout)<br> { <br> var io = document.getElementById(frameId);<br> 試してみてください<br> { <br> if(io.contentWindow)<br> {<br> xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;<br> xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;<br> <br> }else if(io.contentDocument)<br> {<br> xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;<br> xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;<br> } <br> }キャッチ(e)<br> {<br> jQuery.handleError(s, xml, null, e);<br> }<br> if ( xml || isTimeout == "タイムアウト") <br> { <br> requestDone = true;<br> var ステータス;<br> 試してみてください{<br> status = isTimeout != "タイムアウト" ? "成功" : "エラー";<br> // リクエストが成功したか、変更されていないことを確認します<br> if ( ステータス != "エラー" )<br> {<br> // データを処理します (コールバックに関係なく httpData を通じて XML を実行します)<br> var data = jQuery.uploadHttpData( xml, s.dataType ); <br> // ローカル コールバックが指定されている場合は、それを起動してデータを渡します<br> if ( s.success )<br> s.success( データ, ステータス );<br> <br> // グローバル コールバックを起動します<br> if( s.global )<br> jQuery.event.trigger( "ajaxSuccess", [xml, s] );<br> 他<br> jQuery.handleError(s, xml, status);<br> } キャッチ(e) <br> {<br> ステータス = "エラー";<br> jQuery.handleError(s, xml, status, e);<br> }<br> </p> <p> // リクエストは完了しました<br> if( s.global )<br> jQuery.event.trigger( "ajaxComplete", [xml, s] );<br> </p> <p> // グローバル AJAX カウンターを処理します<br> if ( s.global && ! --jQuery.active )<br> jQuery.event.trigger( "ajaxStop" );<br> </p> <p> // 処理結果<br> if ( s.complete )<br> s.complete(xml, ステータス);<br> </p> <p> jQuery(io).unbind()<br> </p> <p> setTimeout(function()<br> { 試してみましょう <br> {<br> jQuery(io).remove();<br> jQuery(フォーム).remove(); <br> <br> } キャッチ(e) <br> {<br> jQuery.handleError(s, xml, null, e);<br> } <br> </p> <p> }, 100)<br> </p> <p> xml = null<br> </p> <p> }<br> }<br> // タイムアウトチェッカー<br> if ( s.timeout > 0 ) <br> {<br> setTimeout(function(){<br> // リクエストがまだ発生しているかどうかを確認します<br> if( !requestDone ) UploadCallback( "タイムアウト" );<br> }, s.timeout);<br> }<br> 試してみてください<br> {<br> </p> <p> var form = jQuery('#' + formId);<br> jQuery(form).attr('action', s.url);<br> jQuery(フォーム).attr('メソッド', 'POST');<br> jQuery(form).attr('target', FrameId);<br> if(フォーム.エンコーディング)<br> {<br> jQuery(form).attr('エンコーディング', 'multipart/form-data'); <br> }<br> それ以外<br> { <br> jQuery(form).attr('enctype', 'multipart/form-data'); <br> } <br> jQuery(form).submit();<br> </p> <p> } キャッチ(e) <br> { <br> jQuery.handleError(s, xml, null, e);<br> }<br> <br> jQuery('#' + FrameId).load(uploadCallback );<br> return {abort: function () {}}; <br> </p> <p> }、<br> </p> <p> UploadHttpData: function( r, type ) {<br> var data = !type;<br> データ = タイプ == "xml" ||データ ？ r.responseXML : r.responseText;<br> // タイプが「script」の場合、グローバルコンテキストで評価します<br> if ( type == "スクリプト" )<br> jQuery.globalEval( data );<br> // JSON が使用されている場合は、JavaScript オブジェクトを取得します。<br> if ( type == "json" )<br> eval( "データ = " + データ );<br> // html内のスクリプトを評価します<br> if ( type == "html" )<br> jQuery("</p> <div>").html(data).evalScripts();<br> <p> データを返す;<br> }<br> })</p> <p></スクリプト><br> </p> <p><form id="upform" action="" method="post" enctype="multipart/form-data"><br> <input id='fname' size='80' /><br> <input type="file" name="file1"<br /> id="file1" size="30" /> <input type="button" value="上传"<br /> onclick="return ajaxFileUpload();" /> <span id="msg"<br /> style="display: none">アップロード中...</span><br> </フォーム><br> </p> <p><script type="text/javascript"><br> var str = '';<br> 関数 ajaxFileUpload(){ <br> $("#msg")<br> .ajaxStart(function(){<br> $(this).show();<br> });<br> /*<br> .ajaxComplete(関数(){<br> $(this).hide();<br> });<br> */<br> $.ajaxFileUpload(<br> {<br> URL:'up_deal.php',<br> セキュアウリ:false、<br> fileElementId:'file1',<br> データタイプ: 'テキスト',<br> //data:{名前:'qinmi', id:'123'},<br> 成功: 関数(データ){<br> if(データ=='エラー'){<br> $('#msg').html("<span style='color:red'>上传失败</span>");<br> }その他{<br> $('#msg').html("<span style='color:green'>上传成功</span>");<br> str += data+'@';<br> $('#fname').val(str);<br> }<br> }<br> }<br> );<br> false を返します;<br> }<br> </スクリプト></p> </div> </td> </tr> </table> <p><br> <br> up_deal.php</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE">代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6450')">复制幣</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id="copy6450"> <p><?php<br> if ((($_FILES["file1"]["type"] == "画像/gif")<br> || ($_FILES["file1"]["type"] == "画像/jpeg")<br> || ($_FILES["file1"]["type"] == "画像/bmp")<br> || ($_FILES["file1"]["type"] == "image/pjpeg"))<br> && ($_FILES["file1"]["size"] $extend =explode(".",$_FILES["file1"]["name"]);<br> $key = count($extend)-1;<br> $ext = ".".$extend[$key];<br> $newfile = time().$ext;<br> </p> <p> if(!file_exists('upload')){mkdir('upload');}<br> move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile);<br> @unlink($_FILES['file1']);<br> エコー $newfile;<br> }その他{<br> エコー「エラー」;<br> }<br> ?></p> </td> </tr> </table> <p align="left"></p> <div style="display:none;"> <span id="url" itemprop="url">http://www.bkjia.com/PHPjc/632906.html</span><span id="indexUrl" itemprop="indexUrl">www.bkjia.com</span><span id="isOriginal" itemprop="isOriginal">true</span><span id="isBasedOnUrl" itemprop="isBasedOnUrl">http://www.bkjia.com/PHPjc/632906.html</span><span id="genre" itemprop="genre">技術記事</span><span id="description" itemprop="description"> jquery ajax を利用して php を使用して図を上に転送し、下で私を介して php ajax を利用してさまざまなファイルを新規に上に転送し、サンプルを直接公開することで各位の同学に役立つことを希望します。 </span> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
