JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 29, 2016 am 08:54 AM

ajaxfileupload

コードの構造は次のとおりです:

ajaxfileupload.js,ajaxfileupload官网,ajaxfileupload下载,ajaxfileupload使用,ajaxfileupload参数,ajaxfileupload用法,ajaxfileupload api,ajaxfileupload上传,ajaxfileupload详解,ajaxfileupload插件,ajaxfileupload php,ajaxfileupload跨域,ajaxfileupload乱码,ajaxfileupload ie8,ajaxfileupload ie

1. HTML コード。説明の必要はありません。

<span> 1</span><span><span>DOCTYPE html</span><span>></span><span> 2</span><span><span>html</span><span>></span><span> 3</span><span><span>head</span><span>></span><span> 4</span><span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>></span><span> 5</span><span><span>title</span><span>></span>文件上传<span></span><span>title</span><span>></span><span> 6</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>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>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="/static/imghwm/default1.png" data-src="</span><span>'</span><span>+</span><span>data[</span><span>0</span><span>].path_name</span><span>+</span><span>'</span><span>" class="lazy" alt="JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie" ><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="/static/imghwm/default1.png" data-src="'+data[0].path_name+'" class="lazy" alt="JQプラグインajaxFileUploadとphp実装の画像とデータが同時にアップロードされるajaxfileuploadが文字化けするajaxfileupload ie8 ajaxfileupload ie" >')</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>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>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>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>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></span></span></span></span></span></span></span></span></span></span></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>创建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> })<p>uploadFile(<span>$path="uploads",<span>$allowExt=<span>array("gif","jpeg","png","jpg","wbmp"),<span>$maxSize=2097152 ,<span>$imgFlag=<span>true<span>);</span></span></span></span></span></span></span></p>
<p>この PHP コードを変更して、他のファイルやサイズ制限をアップロードすることができます。 <span>getimagesize</span> は、ウイルス ファイルのサフィックスが変更されているかどうかを判断するために使用されます。 </p>
<p>上記のコードを直接コピーして、画像とユーザーデータの同時アップロードを完了します。 </p>
<p>返される結果: [{"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"}]</p>
                
                
                <p>
                    上記では、ajaxfileupload の内容を含め、JQ プラグインの ajaxFileUpload、画像の PHP 実装、およびデータのアップロードを同時に紹介しています。PHP チュートリアルに興味のある友人に役立つことを願っています。 </p>
                <p>
                    </p>
</div></iframe>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

PHPセッションの選択肢はありますか？Apr 29, 2025 am 12:36 AM

PHPセッションの代替品には、Cookie、トークンベースの認証、データベースベースのセッション、Redis/Memcachedが含まれます。 1.Cookiesは、クライアントにデータを保存することによりセッションを管理します。 2.トークンベースの認証はトークンを使用してユーザーを検証します。これは非常に安全ですが、追加のロジックが必要です。 3.Databaseベースのセッションは、データベースにデータを保存します。これは、スケーラビリティが良好ですが、パフォーマンスに影響を与える可能性があります。 4. Redis/Memcachedは分散キャッシュを使用してパフォーマンスとスケーラビリティを向上させますが、追加のマッチングが必要です

PHPの完全な形式は何ですか？Apr 28, 2025 pm 04:58 PM

この記事では、PHPについて説明し、その完全なフォーム、Web開発での主要な使用、PythonとJavaとの比較、および初心者の学習のしやすさについて説明します。

PHPはフォームデータをどのように処理しますか？Apr 28, 2025 pm 04:57 PM

PHPは、$ \ _ postおよび$ \ _を使用してフォームデータを処理し、検証、消毒、安全なデータベースインタラクションを通じてセキュリティを確保します。

PHPとASP.NETの違いは何ですか？Apr 28, 2025 pm 04:56 PM

この記事では、PHPとASP.NETを比較して、大規模なWebアプリケーション、パフォーマンスの違い、セキュリティ機能への適合性に焦点を当てています。どちらも大規模なプロジェクトでは実行可能ですが、PHPはオープンソースであり、プラットフォームに依存しませんが、ASP.NET、

PHPはケースに敏感な言語ですか？Apr 28, 2025 pm 04:55 PM

PHPの症例感度は変化します：関数は鈍感であり、変数とクラスは感度があります。ベストプラクティスには、一貫した命名と、比較のためにケース非感受性関数を使用することが含まれます。

PHPでページをリダイレクトするにはどうすればよいですか？Apr 28, 2025 pm 04:54 PM

この記事では、PHPのページリダイレクトのさまざまな方法について説明し、ヘッダー（）関数に焦点を当て、「すでに送信されているヘッダー」エラーなどの一般的な問題に対処します。

PHPでヒントを示すタイプを説明しますApr 28, 2025 pm 04:52 PM

記事では、PHPでヒントを示すタイプについて説明します。これは、機能内の予想データ型を指定する機能です。主な問題は、タイプの施行を通じてコードの品質と読みやすさを改善することです。

PHPのPDOとは何ですか？Apr 28, 2025 pm 04:51 PM

この記事では、PHPのデータベースアクセスの拡張機能であるPHPデータオブジェクト（PDO）について説明します。これは、データベースの抽象化やより良いエラー処理など、準備されたステートメントとMySQLIに対する利点を通じてセキュリティを強化する上でのPDOの役割を強調しています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

Dreamweaver Mac版

ビジュアル Web 開発ツール

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。