search

Home >Backend Development >PHP Tutorial >How to use PHP Ajax to upload images without refreshing_PHP Tutorial

How to use PHP Ajax to upload images without refreshing_PHP Tutorial

WBOY
WBOYOriginal
2016-07-15 13:29:131068browse

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.


www.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" /...
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Specific code examples for protecting databases with PHP_PHP tutorialNext article：Specific code examples for protecting databases with PHP_PHP tutorial

Related articles

See more