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

<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>

<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> })