php ajax无刷新上传图片实例代码

2016-02-19 11:29 37 1 收藏

下面图老师小编要向大家介绍下php ajax无刷新上传图片实例代码,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

AJAX 客户端页面代码: index.html
代码如下:

html
body
h1Ajax file upload sample/h1br/input id="uplaod" name="btn_send" type="button" value="上传测试"/
div id=result/div
PRE class=js name="code"SCRIPT LANGUAGE=JavaScript
// 上传函数
function btn_send.onclick() {
data = ""
spliter = "-------7d8d733180846"
datadata = data + spliter + "rn"
datadata = data + "Content-Disposition: form-data; name="photofile"; filename="C:a.txt"rn"
// datadata = data + "Content-Type: image/pjpeg" + vbCrLf
datadata = data + "Content-Type: text/plain" + "rn" + "rn"
text = "My name is Wilson Lin."
postLength = text.length + data.length + 2 + spliter.length + 4
package = data + text + "rn" + spliter + "--rn"

alert(package)
// 把XML文档发送到Web服务器
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST","./upload.php",false);
xmlhttp.setRequestHeader("Content-Type", "multipart/form-data; boundary=-----7d8d733180846");
xmlhttp.setRequestHeader("Content-Length", postLength);
xmlhttp.send(package);
// 显示服务器返回的信息
result.innerHTML=xmlhttp.ResponseText;
}
/SCRIPT
/PRE
/body
/html

PHP服务器端代码: upload.php
代码如下:

?php
// $_FILES['photofile']:是获得上传图片的数组
// $uploadfile:存放地址
$uploadfile = "D:/".$_FILES['photofile']['name'];
copy( $_FILES['photofile']['tmp_name'], $uploadfile );
echo "URL: a href='http://localhost/".$_FILES['photofile']['name']."' target='_blank'".$_FILES['photofile']['name']."/abr/";
?
Upload successed!

来源:http://www.tulaoshi.com/n/20160219/1597691.html

延伸阅读
标签: Web开发
AJAX介绍      AJAX 关键词:   JavaScript脚本和可扩展标记语言(XML)   WEB浏览器技术   开放式WEB标准   浏览器以及独立平台   更好更快的网络应用程序   XML以及HTTP请求      AJAX = 异步JavaScript和可扩展标记语言   A...
标签: Web开发
尤其是在Jquery,porotype,Ext等框架流行之后,大量简化的代码可说是为程序员带来了福音, 从繁重的代码工作之中解脱出来,轻易的就可以实现过去书写复杂的功能。 不过有利有弊,到如今,习惯了使用各种框架,而很少自己书写内部源码的程序员们,还有几个记得Ajax那其实并不算复杂的基本代码呢? 今天,为了不遗忘当初的热忱,我把这基础的...
标签: Web开发
静态页面 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title无标题页/title script type="text/javascript" src="jquery/jquery.js" //这里不可以用script type="" src="" / /script sc...
标签: Web开发
Ajax内部交流文档一、使用Ajax的主要原因 1、通过适当的Ajax应用达到更好的用户体验; 2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。 二、引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是A...
标签: Web开发
Ajax内部交流文档一、使用Ajax的主要原因  1、通过适当的Ajax应用达到更好的用户体验;  2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。     二、引用  Ajax这个概念的最早提出者Jesse&...

经验教程

420

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部