Community
Learn
Tools Library
AI Tools
Leisure
search
English
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
Release： 2016-07-15 13:29:13
Original
1087 people have browsed it

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>
Copy after login

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>
Copy after login

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" /...
Related labels：
ajax php upload code refresh picture how accomplish client of use page
source：php.cn
Previous article：Specific code examples for protecting databases with PHP_PHP tutorial Next article：Analyze the specific usage of PHP function array_pop()_PHP tutorial
Statement of this Website
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
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...
From 2024-04-06 22:01:35
0
3
816
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to trigger render (with filter and pagination) on sort method in React? Here is my Sort.js style component: <SortWrapper><SortText>SortBy</SortText...
From 2024-04-06 21:28:37
0
1
2257
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template