How to use PHP Ajax to upload images without refreshing_PHP Tutorial

As a PHP Ajax client page code: index.html

<ol class="dp-xml">
<li class="alt"><span><strong><font color="#006699"><span class="tag"><</SPAN><SPAN class=tag-name>html</SPAN><SPAN class=tag>></span></font></strong><span>   </span></span></li>
<li class="">
<span></span><strong><font color="#006699"><span class="tag"><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></span></font></strong><span>   </span>
</li>
<li class="alt">
<span></span><strong><font color="#006699"><span class="tag"><</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></span></font></strong><span>Ajax file upload sample</span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>h1</SPAN><SPAN class=tag>></span><span class="tag"><</SPAN><SPAN class=tag-name>br</SPAN><SPAN class=tag>/></span><span class="tag"><</SPAN><SPAN class=tag-name>input</SPAN></FONT></STRONG><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>id</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>"uplaod"</FONT></SPAN><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>name</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>"btn_send"</FONT></SPAN><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>type</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>"button"</FONT></SPAN><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>value</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>"上传测试"</FONT></SPAN><SPAN class=tag><STRONG><FONT color=#006699>/></span></font></strong><span>   </span>
</li>
<li class="">
<span></span><strong><font color="#006699"><span class="tag"><</SPAN><SPAN class=tag-name>div</SPAN></FONT></STRONG><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>id</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>result</FONT></SPAN><STRONG><FONT color=#006699><SPAN class=tag>></span><span class="tag"></</SPAN><SPAN class=tag-name>div</SPAN><SPAN class=tag>></span></font></strong><span>   </span>
</li>
<li class="alt">
<span></span><strong><font color="#006699"><span class="tag"><</SPAN><SPAN class=tag-name>PRE</SPAN></FONT></STRONG><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>class</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>js</FONT></SPAN><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>name</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>"code"</FONT></SPAN><STRONG><FONT color=#006699><SPAN class=tag>></span><span class="tag"><</SPAN><SPAN class=tag-name>SCRIPT</SPAN></FONT></STRONG><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>LANGUAGE</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>JavaScript</FONT></SPAN><SPAN class=tag><STRONG><FONT color=#006699>></span></font></strong><span>   </span>
</li>
<li class=""><span>// 上传函数   </span></li>
<li class="alt"><span>function btn_send.onclick() {   </span></li>
<li class="">
<span></span><span class="attribute"><font color="#ff0000">data</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">""</font></span><span>   </span>
</li>
<li class="alt">
<span></span><span class="attribute"><font color="#ff0000">spliter</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">"-------7d8d733180846"</font></span><span>   </span>
</li>
<li class="">
<span></span><span class="attribute-value"><font color="#0000ff">data</font></span><span class="attribute"><font color="#ff0000">datadata</font></span><span> = data + spliter + "rn"   </span>
</li>
<li class="alt">
<span></span><span class="attribute-value"><font color="#0000ff">data</font></span><span class="attribute"><font color="#ff0000">datadata</font></span><span> = data + "Content-Disposition: form-data; </span><span class="attribute"><font color="#ff0000">name</font></span><span>="photofile"; </span><span class="attribute"><font color="#ff0000">filename</font></span><span>="C:\a.txt"rn"   </span>
</li>
<li class="">
<span>// </span><span class="attribute-value"><font color="#0000ff">data</font></span><span class="attribute"><font color="#ff0000">datadata</font></span><span> = data + "Content-Type: image/pjpeg" + vbCrLf   </span>
</li>
<li class="alt">
<span></span><span class="attribute-value"><font color="#0000ff">data</font></span><span class="attribute"><font color="#ff0000">datadata</font></span><span> = data + "Content-Type: text/plain" + "rn" + "rn"   </span>
</li>
<li class="">
<span></span><span class="attribute"><font color="#ff0000">text</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">"My name is Wilson Lin."</font></span><span>   </span>
</li>
<li class="alt">
<span></span><span class="attribute"><font color="#ff0000">postLength</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">text</font></span><span>.length + data.length + 2 + spliter.length + 4   </span>
</li>
<li class="">
<span></span><span class="attribute"><font color="#ff0000">package</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">data</font></span><span> + text + "rn" + spliter + "--rn"   </span>
</li>
<li class="alt"><span>alert(package)   </span></li>
<li class=""><span>// 把XML文档发送到Web服务器   </span></li>
<li class="alt">
<span>var </span><span class="attribute"><font color="#ff0000">xmlhttp</font></span><span> = </span><span class="attribute-value"><font color="#0000ff">new</font></span><span> ActiveXObject("Microsoft.XMLHTTP");   </span>
</li>
<li class=""><span>xmlhttp.open("POST","./upload.php",false);   </span></li>
<li class="alt">
<span>xmlhttp.setRequestHeader("Content-Type", "multipart/form-data; </span><span class="attribute"><font color="#ff0000">boundary</font></span><span>=-----7d8d733180846");   </span>
</li>
<li class=""><span>xmlhttp.setRequestHeader("Content-Length", postLength);   </span></li>
<li class="alt"><span>xmlhttp.send(package);   </span></li>
<li class=""><span>// 显示服务器返回的信息   </span></li>
<li class="alt">
<span></span><span class="attribute"><font color="#ff0000">result.innerHTML</font></span><span>=</span><span class="attribute-value"><font color="#0000ff">xmlhttp</font></span><span>.ResponseText;   </span>
</li>
<li class=""><span>}   </span></li>
<li class="alt">
<span></span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>SCRIPT</SPAN><SPAN class=tag>></span></font></strong><span>   </span>
</li>
<li class="">
<span></span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>PRE</SPAN><SPAN class=tag>></span></font></strong><span>   </span>
</li>
<li class="alt">
<span></span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></span></font></strong><span>   </span>
</li>
<li class="">
<span></span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>html</SPAN><SPAN class=tag>></span></font></strong><span> </span>
</li>
</ol>

PHP Ajax server-side code: upload.php

<ol class="dp-xml">
<li class="alt">
<span><strong><font color="#006699"><span class="tag"><?</SPAN><SPAN class=tag-name>php</SPAN></FONT></STRONG><SPAN>   </SPAN></SPAN><LI class=""><SPAN>// $_FILES['photofile']:是获得上传图片的数组   </SPAN><LI class=alt><SPAN>// $uploadfile：存放地址   </SPAN><LI class=""><SPAN>$</SPAN><SPAN class=attribute><FONT color=#ff0000>uploadfile</FONT></SPAN><SPAN> = </SPAN><SPAN class=attribute-value><FONT color=#0000ff>"D:/"</FONT></SPAN><SPAN>.$_FILES['photofile']['name'];   </SPAN></SPAN><LI class=alt><SPAN>copy( $_FILES['photofile']['tmp_name'], $uploadfile );   </SPAN><LI class=""><SPAN>echo "URL: </SPAN><STRONG><FONT color=#006699><SPAN class=tag><</SPAN><SPAN class=tag-name>a</SPAN></FONT></STRONG><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>href</FONT></SPAN><SPAN>='http://localhost/".$_FILES['photofile']['name</SPAN><SPAN class=attribute-value><FONT color=#0000ff>']."'</FONT></SPAN><SPAN> </SPAN><SPAN class=attribute><FONT color=#ff0000>target</FONT></SPAN><SPAN>=</SPAN><SPAN class=attribute-value><FONT color=#0000ff>'_blank'</FONT></SPAN><SPAN class=tag><STRONG><FONT color=#006699>></span></font></strong></span><span>".$_FILES['photofile']['name']."</span><strong><font color="#006699"><span class="tag"></</SPAN><SPAN class=tag-name>a</SPAN><SPAN class=tag>></span><span class="tag"><</SPAN><SPAN class=tag-name>br</SPAN><SPAN class=tag>/></span></font></strong><span>";   </span>
</li>
<li class="alt">
<span></span><span class="tag"><strong><font color="#006699">?></font></strong></span><span>  </span>
</li>
</ol>

The code written above is the basic PHP Ajax specific solution for image upload without refreshing.

http://www.bkjia.com/PHPjc/446386.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/446386.htmlTechArticleAs a PHP Ajax client page code: index.html html body h1 Ajaxfileuploadsample / h1 br / input id = " uplaod" name = "btn_send" type = "button" value = "Upload Test" /...