ホームページ
バックエンド開発
PHPチュートリアル
JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie
バックエンド開発
PHPチュートリアル
JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie
JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie
ajaxfileupload
コードの構造は次のとおりです:
1. HTML コード。説明の必要はありません。
<span> 1</span><span><!</span><span>DOCTYPE html</span><span>></span><span> 2</span><span><</span><span>html</span><span>></span><span> 3</span><span><</span><span>head</span><span>></span><span> 4</span><span><</span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>></span><span> 5</span><span><</span><span>title</span><span>></span>文件上传<span></</span><span>title</span><span>></span><span> 6</span><span><</span><span>script </span><span>src</span><span>="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"</span><span>></</span><span>script</span><span>></span><span> 7</span><span><</span><span>script </span><span>src</span><span>="uploads/ajaxFileUpload.js"</span><span> type</span><span>="text/javascript"</span><span> charset</span><span>="utf-8"</span><span>></</span><span>script</span><span>></span><span> 8</span><span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span><span> 9</span><span> $(</span><span>function</span><span>(){
</span><span>10</span><span> $(</span><span>'</span><span>#ti</span><span>'</span><span>).click(</span><span>function</span><span>(){
</span><span>11</span><span>var</span><span> data </span><span>=</span><span> { name: </span><span>'</span><span>my name</span><span>'</span><span>, description: </span><span>'</span><span>short description</span><span>'</span><span> }
</span><span>12</span><span> $.ajaxFileUpload({
</span><span>13</span><span> url: </span><span>'</span><span>up.php</span><span>'</span><span>,
</span><span>14</span><span> secureuri: </span><span>false</span><span>,
</span><span>15</span><span> data: data,
</span><span>16</span><span> fileElementId: </span><span>'</span><span>upf</span><span>'</span><span>,
</span><span>17</span><span> dataType: </span><span>'</span><span>json</span><span>'</span><span>,
</span><span>18</span><span> success: </span><span>function</span><span> (data) {
</span><span>19</span><span>//</span><span> var datejson=eval(data);</span><span>20</span><span>//</span><span>console.log(data[0].path_name)</span><span>21</span><span> $(</span><span>'</span><span>#im</span><span>'</span><span>).append(</span><span>'</span><span><img src="</span><span>'</span><span>+</span><span>data[</span><span>0</span><span>].path_name</span><span>+</span><span>'</span><span>"></span><span>'</span><span>)
</span><span>22</span><span>//</span><span>console.log('<img src="'+data[0].path_name+'">')</span><span>23</span><span> },
</span><span>24</span><span> error: </span><span>function</span><span> (data) {
</span><span>25</span><span> console.log(data)
</span><span>26</span><span> }
</span><span>27</span><span> });
</span><span>28</span><span>29</span><span> })
</span><span>30</span><span>31</span><span> })
</span><span>32</span><span></</span><span>script</span><span>></span><span>33</span><span></</span><span>head</span><span>></span><span>34</span><span><</span><span>body</span><span>></span><span>35</span><span><!--</span><span><form action="up.php" method="post" enctype="multipart/form-data">
</span><span>36</span><span> </form></span><span>--></span><span>37</span><span><</span><span>input </span><span>type</span><span>="file"</span><span> name</span><span>="upfm"</span><span> id</span><span>="upf"</span><span> value</span><span>=""</span><span>/></span><span>38</span><span><</span><span>input </span><span>id</span><span>='ti' </span><span>type</span><span>="button"</span><span> value</span><span>="提交"</span><span>/></span><span>39</span><span>40</span><span><</span><span>div </span><span>id</span><span>="im"</span><span>></span><span>41</span><span>42</span><span></</span><span>div</span><span>></span><span>43</span><span>44</span><span></</span><span>body</span><span>></span><span>45</span><span>46</span><span></</span><span>html</span><span>></span>ログイン後にコピー
2. ajaxFileUpload プラグインに関して、JQ1.9 以降を使用している場合は、JQ が handleError メソッドをかなり早い段階で放棄したコードに 1 ～ 12 をコピーしてください。コメントはコードを非常にわかりやすく説明しています。
れぇ
3. php コード
<span> 1</span><span>jQuery.extend({
</span><span> 2</span> handleError: <span>function</span><span>( s, xhr, status, e ) {
</span><span> 3</span><span> 4</span><span>if</span><span> ( s.error ) {
</span><span> 5</span> s.error.call( s.context ||<span> s, xhr, status, e );
</span><span> 6</span><span> }
</span><span> 7</span><span> 8</span><span> 9</span><span>if</span><span> ( s.global ) {
</span><span> 10</span> (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError"<span>, [xhr, s, e] );
</span><span> 11</span><span> }
</span><span> 12</span><span> },
</span><span> 13</span> createUploadIframe: <span>function</span> (id, uri) {<span>//</span><span>id为当前系统时间字符串，uri是外部传入的json对象的一个参数</span><span> 14</span><span>//</span><span>create frame</span><span> 15</span><span>var</span> frameId = 'jUploadFrame' + id; <span>//</span><span>给iframe添加一个独一无二的id</span><span> 16</span><span>var</span> iframeHtml = '<iframe + frameId + '" name="' + frameId + '"'; <span>//</span><span>创建iframe元素</span><span> 17</span><span>if</span> (window.ActiveXObject) {<span>//</span><span>判断浏览器是否支持ActiveX控件</span><span> 18</span><span>if</span> (<span>typeof</span> uri == 'boolean'<span>) {
</span><span> 19</span> iframeHtml += ' src="' + 'javascript:false' + '"'<span>;
</span><span> 20</span> } <span>else</span><span>if</span> (<span>typeof</span> uri == 'string'<span>) {
</span><span> 21</span> iframeHtml += ' src="' + uri + '"'<span>;
</span><span> 22</span><span> }
</span><span> 23</span><span> }
</span><span> 24</span> iframeHtml += ' />'<span>;
</span><span> 25</span> jQuery(iframeHtml).appendTo(document.body); <span>//</span><span>将动态iframe追加到body中</span><span> 26</span><span>return</span> jQuery('#' + frameId).get(0); <span>//</span><span>返回iframe对象</span><span> 27</span><span> },
</span><span> 28</span> createUploadForm: <span>function</span> (id, fileElementId, data) {<span>//</span><span>id为当前系统时间字符串，fileElementId为页面<input type='file' />的id，data的值需要根据传入json的键来决定</span><span> 29</span><span>//</span><span>create form </span><span> 30</span><span>var</span> formId = 'jUploadForm' + id; <span>//</span><span>给form添加一个独一无二的id</span><span> 31</span><span>var</span> fileId = 'jUploadFile' + id; <span>//</span><span>给<input type='file' />添加一个独一无二的id</span><span> 32</span><span>var</span> form = jQuery('<form action="" method="POST" name="' + formId + '" + formId + '" enctype="multipart/form-data" ></form>'); <span>//</span><span>创建form元素</span><span> 33</span><span>if</span> (data) {<span>//</span><span>通常为false</span><span> 34</span><span>for</span> (<span>var</span> i <span>in</span><span> data) {
</span><span> 35</span> jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); <span>//</span><span>根据data的内容，创建隐藏域，这部分我还不知道是什么时候用到。估计是传入json的时候，如果默认传一些参数的话要用到。</span><span> 36</span><span> }
</span><span> 37</span> } <span>var</span> oldElement = jQuery('#' + fileElementId); <span>//</span><span>得到页面中的<input type='file' />对象</span><span> 38</span><span>var</span> newElement = jQuery(oldElement).clone(); <span>//</span><span>克隆页面中的<input type='file' />对象</span><span> 39</span> jQuery(oldElement).attr('id', fileId); <span>//</span><span>修改原对象的id</span><span> 40</span> jQuery(oldElement).before(newElement); <span>//</span><span>在原对象前插入克隆对象</span><span> 41</span> jQuery(oldElement).appendTo(form); <span>//</span><span>把原对象插入到动态form的结尾处</span><span> 42</span><span>//</span><span>set attributes</span><span> 43</span> jQuery(form).css('position', 'absolute'); <span>//</span><span>给动态form添加样式，使其浮动起来，</span><span> 44</span> jQuery(form).css('top', '-1200px'<span>);
</span><span> 45</span> jQuery(form).css('left', '-1200px'<span>);
</span><span> 46</span> jQuery(form).appendTo('body'); <span>//</span><span>把动态form插入到body中</span><span> 47</span><span>return</span><span> form;
</span><span> 48</span><span> },
</span><span> 49</span> ajaxFileUpload: <span>function</span> (s) {<span>//</span><span>这里s是个json对象，传入一些ajax的参数</span><span> 50</span><span>//</span><span> TODO introduce global settings, allowing the client to modify them for all requests, not only timeout </span><span> 51</span> s = jQuery.extend({}, jQuery.ajaxSettings, s); <span>//</span><span>此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象</span><span> 52</span><span>var</span> id = <span>new</span> Date().getTime(); <span>//</span><span>取当前系统时间，目的是得到一个独一无二的数字</span><span> 53</span><span>var</span> form = jQuery.createUploadForm(id, s.fileElementId, (<span>typeof</span> (s.data) == 'undefined' ? <span>false</span> : s.data)); <span>//</span><span>创建动态form</span><span> 54</span><span>var</span> io = jQuery.createUploadIframe(id, s.secureuri); <span>//</span><span>创建动态iframe</span><span> 55</span><span>var</span> frameId = 'jUploadFrame' + id; <span>//</span><span>动态iframe的id</span><span> 56</span><span>var</span> formId = 'jUploadForm' + id; <span>//</span><span>动态form的id</span><span> 57</span><span>//</span><span> Watch for a new set of requests</span><span> 58</span><span>if</span> (s.global && !jQuery.active++) {<span>//</span><span>当jQuery开始一个ajax请求时发生</span><span> 59</span> jQuery.event.trigger("ajaxStart"); <span>//</span><span>触发ajaxStart方法</span><span> 60</span> } <span>var</span> requestDone = <span>false</span>; <span>//</span><span>请求完成标志</span><span> 61</span><span>//</span><span> Create the request object</span><span> 62</span><span>var</span> xml = {}; <span>if</span><span> (s.global)
</span><span> 63</span> jQuery.event.trigger("ajaxSend", [xml, s]); <span>//</span><span>触发ajaxSend方法</span><span> 64</span><span>//</span><span> Wait for a response to come back</span><span> 65</span><span>var</span> uploadCallback = <span>function</span> (isTimeout) {<span>//</span><span>回调函数</span><span> 66</span><span>var</span> io = document.getElementById(frameId); <span>//</span><span>得到iframe对象</span><span> 67</span><span>try</span> { <span>if</span> (io.contentWindow) {<span>//</span><span>动态iframe所在窗口对象是否存在</span><span> 68</span> xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : <span>null</span><span>;
</span><span> 69</span> xml.responseXML = io.contentWindow.document.XMLDocument ?<span> io.contentWindow.document.XMLDocument : io.contentWindow.document;
</span><span> 70</span> } <span>else</span><span>if</span> (io.contentDocument) {<span>//</span><span>动态iframe的文档对象是否存在</span><span> 71</span> xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : <span>null</span><span>;
</span><span> 72</span> xml.responseXML = io.contentDocument.document.XMLDocument ?<span> io.contentDocument.document.XMLDocument : io.contentDocument.document;
</span><span> 73</span><span> }
</span><span> 74</span> } <span>catch</span><span> (e) {
</span><span> 75</span> jQuery.handleError(s, xml, <span>null</span><span>, e);
</span><span> 76</span> } <span>if</span> (xml || isTimeout == "timeout") {<span>//</span><span>xml变量被赋值或者isTimeout == "timeout"都表示请求发出，并且有响应</span><span> 77</span> requestDone = <span>true</span>; <span>//</span><span>请求完成</span><span> 78</span><span>var</span> status; <span>try</span><span> {
</span><span> 79</span> status = isTimeout != "timeout" ? "success" : "error"; <span>//</span><span>如果不是“超时”，表示请求成功</span><span> 80</span><span>//</span><span> Make sure that the request was successful or notmodified</span><span> 81</span><span>if</span> (status != "error") { <span>//</span><span> process the data (runs the xml through httpData regardless of callback)</span><span> 82</span><span>var</span> data = jQuery.uploadHttpData(xml, s.dataType); <span>//</span><span>根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果</span><span> 83</span><span>//</span><span> If a local callback was specified, fire it and pass it the data</span><span> 84</span><span>if</span><span> (s.success)
</span><span> 85</span> s.success(data, status); <span>//</span><span>执行上传成功的操作</span><span> 86</span><span>//</span><span> Fire the global callback</span><span> 87</span><span>if</span><span> (s.global)
</span><span> 88</span> jQuery.event.trigger("ajaxSuccess"<span>, [xml, s]);
</span><span> 89</span> } <span>else</span><span> 90</span><span> jQuery.handleError(s, xml, status);
</span><span> 91</span> } <span>catch</span><span> (e) {
</span><span> 92</span> status = "error"<span>;
</span><span> 93</span><span> jQuery.handleError(s, xml, status, e);
</span><span> 94</span> } <span>//</span><span> The request was completed</span><span> 95</span><span>if</span><span> (s.global)
</span><span> 96</span> jQuery.event.trigger("ajaxComplete", [xml, s]); <span>//</span><span> Handle the global AJAX counter</span><span> 97</span><span>if</span> (s.global && ! --<span>jQuery.active)
</span><span> 98</span> jQuery.event.trigger("ajaxStop"); <span>//</span><span> Process result</span><span> 99</span><span>if</span><span> (s.complete)
</span><span>100</span><span> s.complete(xml, status);
</span><span>101</span> jQuery(io).unbind();<span>//</span><span>移除iframe的事件处理程序</span><span>102</span> setTimeout(<span>function</span> () {<span>//</span><span>设置超时时间</span><span>103</span><span>try</span><span> {
</span><span>104</span> jQuery(io).remove();<span>//</span><span>移除动态iframe</span><span>105</span> jQuery(form).remove();<span>//</span><span>移除动态form</span><span>106</span> } <span>catch</span><span> (e) {
</span><span>107</span> jQuery.handleError(s, xml, <span>null</span><span>, e);
</span><span>108</span><span> }
</span><span>109</span> }, 100<span>)
</span><span>110</span> xml = <span>null</span><span>111</span><span> }
</span><span>112</span> } <span>//</span><span> Timeout checker</span><span>113</span><span>if</span> (s.timeout > 0) {<span>//</span><span>超时检测</span><span>114</span> setTimeout(<span>function</span> () { <span>//</span><span> Check to see if the request is still happening</span><span>115</span><span>if</span> (!requestDone) uploadCallback("timeout");<span>//</span><span>如果请求仍未完成，就发送超时信号</span><span>116</span><span> }, s.timeout);
</span><span>117</span> } <span>try</span> { <span>var</span> form = jQuery('#' +<span> formId);
</span><span>118</span> jQuery(form).attr('action', s.url);<span>//</span><span>传入的ajax页面导向url</span><span>119</span> jQuery(form).attr('method', 'POST');<span>//</span><span>设置提交表单方式</span><span>120</span> jQuery(form).attr('target', frameId);<span>//</span><span>返回的目标iframe，就是创建的动态iframe</span><span>121</span><span>if</span> (form.encoding) {<span>//</span><span>选择编码方式</span><span>122</span> jQuery(form).attr('encoding', 'multipart/form-data'<span>);
</span><span>123</span> } <span>else</span><span> {
</span><span>124</span> jQuery(form).attr('enctype', 'multipart/form-data'<span>);
</span><span>125</span><span> }
</span><span>126</span> jQuery(form).submit();<span>//</span><span>提交form表单</span><span>127</span> } <span>catch</span><span> (e) {
</span><span>128</span> jQuery.handleError(s, xml, <span>null</span><span>, e);
</span><span>129</span><span> }
</span><span>130</span> jQuery('#' + frameId).load(uploadCallback); <span>//</span><span>ajax 请求从服务器加载数据，同时传入回调函数</span><span>131</span><span>return</span> { abort: <span>function</span><span> () { } };
</span><span>132</span><span> },
</span><span>133</span> uploadHttpData: <span>function</span> (r, type) { <span>var</span> data = !<span>type;
</span><span>134</span> data = type == "xml" || data ? r.responseXML : r.responseText; <span>//</span><span> If the type is "script", eval it in global context</span><span>135</span><span>if</span> (type == "script"<span>)
</span><span>136</span> jQuery.globalEval(data); <span>//</span><span> Get the JavaScript object, if JSON is used.</span><span>137</span><span>if</span> (type == "json"<span>)
</span><span>138</span> eval("data = " + data); <span>//</span><span> evaluate scripts within html</span><span>139</span><span>if</span> (type == "html"<span>)
</span><span>140</span> jQuery("<div>").html(data).evalScripts(); <span>return</span><span> data;
</span><span>141</span><span> }
</span><span>142</span> })ログイン後にコピー
uploadFile($path="uploads",$allowExt=array("gif","jpeg","png","jpg","wbmp"),$maxSize=2097152 ,$imgFlag=true);
この PHP コードを変更して、他のファイルやサイズ制限をアップロードすることができます。 getimagesize は、ウイルス ファイルのサフィックスが変更されているかどうかを判断するために使用されます。
上記のコードを直接コピーして、画像とユーザーデータの同時アップロードを完了します。
返される結果: [{"name":"d032a4ee7e957d956c8af0039d7e3085.jpg","error":0,"filesiz":{"0":720,"1":1280,"2":2,"3": "width="720" height="1280"","bits":8,"channels":3,"mime":"image/jpeg"},"path_name":"uploads/d032a4ee7e957d956c8af0039d7e3085.jpg"}]
上記では、ajaxfileupload の内容を含め、JQ プラグインの ajaxFileUpload、画像の PHP 実装、およびデータのアップロードを同時に紹介しています。PHP チュートリアルに興味のある友人に役立つことを願っています。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
1 か月前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
3週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7642
15
7642
15
CakePHP チュートリアル
1392
52
1392
52
Steamのアカウント名の形式は何ですか
91
11
91
11
NYTの接続はヒントと回答です
33
150
33
150
JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。
Apr 05, 2025 am 12:04 AM
JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。
セッションのハイジャックはどのように機能し、どのようにPHPでそれを軽減できますか？
Apr 06, 2025 am 12:02 AM
セッションハイジャックは、次の手順で達成できます。1。セッションIDを取得します。2。セッションIDを使用します。3。セッションをアクティブに保ちます。 PHPでのセッションハイジャックを防ぐための方法には次のものが含まれます。1。セッション_regenerate_id（）関数を使用して、セッションIDを再生します。2。データベースを介してストアセッションデータを3。
確固たる原則と、それらがPHP開発にどのように適用されるかを説明してください。
Apr 03, 2025 am 12:04 AM
PHP開発における固体原理の適用には、次のものが含まれます。1。単一責任原則（SRP）：各クラスは1つの機能のみを担当します。 2。オープンおよびクローズ原理（OCP）：変更は、変更ではなく拡張によって達成されます。 3。Lischの代替原則（LSP）：サブクラスは、プログラムの精度に影響を与えることなく、基本クラスを置き換えることができます。 4。インターフェイス分離原理（ISP）：依存関係や未使用の方法を避けるために、細粒インターフェイスを使用します。 5。依存関係の反転原理（DIP）：高レベルのモジュールと低レベルのモジュールは抽象化に依存し、依存関係噴射を通じて実装されます。
phpstormでCLIモードをデバッグする方法は？
Apr 01, 2025 pm 02:57 PM
phpstormでCLIモードをデバッグする方法は？ PHPStormで開発するときは、PHPをコマンドラインインターフェイス（CLI）モードでデバッグする必要がある場合があります。
システムの再起動後にUnixSocketの権限を自動的に設定する方法は？
Mar 31, 2025 pm 11:54 PM
システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります：sudo ...
PHPでの後期静的結合を説明します（静的：:)。
Apr 03, 2025 am 12:04 AM
静的結合（静的：:) PHPで後期静的結合（LSB）を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1）解析プロセスは実行時に実行されます。2）継承関係のコールクラスを検索します。3）パフォーマンスオーバーヘッドをもたらす可能性があります。
フレームワークセキュリティ機能：脆弱性から保護します。
Mar 28, 2025 pm 05:11 PM
記事では、入力検証、認証、定期的な更新など、脆弱性から保護するためのフレームワークの重要なセキュリティ機能について説明します。
