如何运用PHP Ajax实现图片的无刷新上传_PHP教程

php中文网
发布: 2016-07-15 13:29:13
原创
1116人浏览过

Cutout老照片上色
Cutout老照片上色

Cutout.Pro推出的黑白图片上色

Cutout老照片上色 20
查看详情 Cutout老照片上色

作为一个php ajax客户端页面代码: index.html

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

<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 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></SPAN><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>/></FONT></STRONG></SPAN><SPAN>   </SPAN></SPAN><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></SPAN><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>></FONT></STRONG></SPAN><SPAN>   </SPAN></SPAN><LI class=""><SPAN>// 上传函数   </SPAN><LI class=alt><SPAN>function btn_send.onclick() {   </SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN><LI class=alt><SPAN>alert(package)   </SPAN><LI class=""><SPAN>// 把XML文档发送到Web服务器   </SPAN><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></SPAN><LI class=""><SPAN>xmlhttp.open("POST","./upload.php",false);   </SPAN><LI class=alt><SPAN>xmlhttp.setRequestHeader("Content-Type", "multipart/form-data; </SPAN><SPAN class=attribute><FONT color=#ff0000>boundary</FONT></SPAN><SPAN>=-----7d8d733180846");   </SPAN></SPAN><LI class=""><SPAN>xmlhttp.setRequestHeader("Content-Length", postLength);   </SPAN><LI class=alt><SPAN>xmlhttp.send(package);   </SPAN><LI class=""><SPAN>// 显示服务器返回的信息   </SPAN><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></SPAN><LI class=""><SPAN>}   </SPAN><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></SPAN><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></SPAN><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></SPAN><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></SPAN></LI></OL>
登录后复制

PHP Ajax服务器端代码: upload.php

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习PHP免费学习笔记(深入)”;

立即学习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>></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></SPAN><LI class=alt><SPAN></SPAN><SPAN class=tag><STRONG><FONT color=#006699>?></FONT></STRONG></SPAN><SPAN>  </SPAN></SPAN></LI></OL>
登录后复制

以上所写代码就是基本的PHP Ajax实现无刷新图片上传的具体解决办法。


www.bkjia.comtruehttp://www.bkjia.com/PHPjc/446386.htmlTechArticle作为一个 PHP Ajax客户端页面代码: index.html html body h1 Ajaxfileuploadsample / h1 br / input id = "uplaod" name = "btn_send" type = "button" value = "上传测试" /...
相关标签:
PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号