php 伪ajax 上传文件 实现无刷新上传文件

September 12th, 2008php技巧 No Comments

发现一个php 伪ajax 上传文件示例，写得比较拖沓，我只把其中有用的部分提取出来，实现无刷新上传文件

 先看代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<?php
 
$upload_dir = 'savedir';  //文件存储的路径
 
 
//处理上传的文件
if (isset($_POST['fileframe']))
{
	$result='ERROR';
	$result_msg = 'No FILE field found';
	if(isset($_FILES['file']))
	{
		if ($_FILES['file']['error'] == UPLOAD_ERR_OK)
{$filename = $_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'], $upload_dir.'/'.$filename); 
$result = 'OK';
}
elseif ($_FILES['file']['error'] == UPLOAD_ERR_INI_SIZE)
$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
else 
$result_msg = 'Unknown error';
	}
 
echo '<html><head><title>-</title></head><body>';
echo '<script language="JavaScript" type="text/javascript">'."\n";
echo 'var parDoc = window.parent.document;';
 
if ($result == 'OK')
{
 echo 'parDoc.getElementById("upload_status").innerHTML = "文件[ '.$filename.' ]上传完成";';
 echo 'parDoc.getElementById("file").form.reset();';
echo 'parDoc.getElementById("file").disabled = false;';
 }
 else
 {
 echo 'parDoc.getElementById("upload_status").innerHTML = "ERROR: '.$result_msg.'";';
 }
 
 echo "\n".'</script></body></html>';
 exit();
}
?>
<!-- Beginning of main page -->
<html><head>
<title>IFRAME 无刷新上传文件示例</title>
</head>
<body>
 
<h1>上传文件:</h1>
<p>文件在选择完成后即刻进行上传 </p>
 
<form action="<?=$PHP_SELF?>" target="upload_iframe" method="post" enctype="multipart/form-data">
 <input type="hidden" name="fileframe" value="true">
 <!-- Target of the form is set to hidden iframe -->
 <!-- From will send its post data to fileframe section of this PHP script (see above) -->
 
 <label for="file">text file uploader:</label><br>
 <!-- JavaScript is called by OnChange attribute -->
 <input type="file" name="file" id="file" onChange="jsUpload(this)">
</form>
<script type="text/javascript">
/* This function is called when user selects file in file dialog */
function jsUpload(upload_field)
{
 // this is just an example of checking file extensions
 // if you do not need extension checking, remove 
 // everything down to line
 // upload_field.form.submit();
 
 var re_text = /\.txt|\.xml|\.zip/i;
 var filename = upload_field.value;
 
 /* Checking file type */
 if (filename.search(re_text) == -1)
 {
 alert("File does not have text(txt, xml, zip) extension");
 upload_field.form.reset();
 return false;
 }
 
 upload_field.form.submit();
upload_status.innerHTML = "文件上传中...";
 upload_field.disabled = true;
 return true;
}
</script>
<iframe name="upload_iframe" style="width: 400px; height: 100px; display: none;">
</iframe>
<!-- For debugging purposes, it's often useful to remove
"display: none" from style="" attribute -->
 
<br>
上传状态:<br>
<span id="upload_status">请选择文件</span>
<br><br>
 
Example by <a href="http://blog.asdjkl.net/">jason's blog</a>
</body>
</html>

我只是给出一个php ajax 文件无刷新上传的例子，这里面还有其他很多工作要补充的
比如：文件存储的目录，文件的类别判断，文件上传成功后做好记录，等等这些工作，根据你的实际需要进行调整。

php 在线编辑器-一个从Ucenter home中剥离的在线编辑器

August 12th, 2008php技巧 1 Comment

我其实和很多人一样一直在找一个简单可用用的php在线编辑器，其实没有必要提供很强悍的功能，一般是图片，swf，链接，也就够了。
在研究uch的过程中感觉它的在线编辑器还是不错的，而且调用还是挺间的。
看了一下，我觉得包含这样这份文件，你就可以用这个php在线编辑器了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//先说如何使用
<form id="postform" name="postform" method="post" action="test.php">
 <textarea class="userData" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0px"></textarea>
  <iframe src="editor.php?charset=utf-8&allowhtml=1" name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;border: 1px solid #C5C5C5;" height="200"></iframe>
  <input type="hidden" name="confirmgo" value="go" />
  <input type="submit" name="posteditsubmit_btn" id="posteditsubmit_btn" onclick="edit_save();" value="提交" class="submit" />&nbsp;
  </form>
  <?php
  if ($_POST['confirmgo']=='go') {
  	$message = $_POST['message'];
  	echo '拿到-->'.$message.'<--';
  	exit();
  }
 ?>

简单吧，你很简单的从message这个值拿到用户输入的东西了。
当然，至于一些过滤什么的，请自行考虑。
下面说说包含的文件
1.editor.php
2.source/script_common.js
3.image/editor 这个目录的所有文件

4.请研究一下js文件里的函数，一些无关函数完全可以删掉，进行进一步的精简。总共php+js的大小大约是40k 50k不到。

怎么样，这个php在线编辑器简单吧？

php ajax 初步应用以及php ajax乱码问题。

July 31st, 2008php技巧 No Comments

php ajax 的应用主要是用在一些不需要刷新的数据提交上，随便起一个例子
顺便看看php ajax 的乱码问题。

下面是某个xxx.js的源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

/**
 * 初始化一个xmlhttp对象
 */
function InitAjax()
{
 var ajax=false; 
 try { 
  ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
 } catch (e) { 
  try { 
   ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
  } catch (E) { 
   ajax = false; 
  } 
 }
 if (!ajax && typeof XMLHttpRequest!='undefined') { 
  ajax = new XMLHttpRequest(); 
 } 
 return ajax;
}
 
 
function go()
{
 
var currSelectValue = document.getElementById("username").value; 
 
 //接收表单的URL地址
 var url = "./index.php";
 
//需要POST的值，把每个变量都通过&来联接
 var postStr  = "username="+ currSelectValue;
 
//实例化Ajax
 var ajax = InitAjax();
 
 //通过Post方式打开连接
 ajax.open("POST", url, true); 
 
 //定义传输的文件HTTP头信息
 ajax.setrequestheader("content-length",postStr.length); 
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
 //发送POST数据
 ajax.send(postStr);
 
 //获取执行状态
 ajax.onreadystatechange = function() { 
  //如果执行状态成功，那么就把返回信息写到指定的层里
  if (ajax.readyState == 4 && ajax.status == 200) { 
 
	 msg.innerHTML = ajax.responseText; 
 
  } 
 }
 
}
 
//对应的index.php 也许是这个样子
 
<?php
header("Content-Type:text/html;charset=GBK"); //指定php输出编码为gbk 防止乱码
 
$username = $_POST['username'];
 
$username = iconv('utf-8','gbk',$username); //请记住ajax进来的参数都是utf-8格式的，一般需要转换
 
exit('你的名字是：'.$username);
 
?>
 
 
//对应的html也许是这个样子
<input type="text" id="username" value="" /> //输入username的地方
 
<div id="msg"></div>
 
//其他代码省略。

这就是一个相对完整的php ajax应用了，当然上面的程序什么也没干
它的经过是这样：
在input框里输入一些字符(你可以试试中文以便验证回显是否乱码)
然后通过类似 onclick=”go()” 这样的方式去执行 go 函数
go函数里面写得很详细了，它把需要的参数组织起来，做成一个 url，然后通过Post方式打开连接。
这个链接执行了index.php这个php程序。取得username直接返回，反馈的信息会显示在msg.innerHTML

这里要说一句，思想要放开点，如果你把exit那句代码改成
exit(’
我的名字是：‘.$username.’‘); 它将会先回车一行，然后显示 我的名字是：xxxx
xxxx还是红色的字体哦。

所以，相当于你几乎可以做任何事情。

上面是php ajax 的post方式传递，还有另外一种get方式传递

get只传递比较少的值
上面的xxx.js大约改成这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function go()
{
 
var currSelectValue = document.getElementById("username").value; 
 
 //接收表单的URL地址
 var url = "./index.php?username="+currSelectValue;
 
//实例化Ajax
 var ajax = InitAjax();
 
 //通过Post方式打开连接
 ajax.open("GET", url, true); 
 
 //定义传输的文件HTTP头信息
 ajax.setrequestheader("content-length",postStr.length); 
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
 
 
 //获取执行状态
 ajax.onreadystatechange = function() { 
  //如果执行状态成功，那么就把返回信息写到指定的层里
  if (ajax.readyState == 4 && ajax.status == 200) { 
 
	 msg.innerHTML = ajax.responseText; 
 
  } 
 }
 
//发送空
　ajax.send(null);
 
}

其实差不多的。

php ajax使用注意:
1.多个参数传递需要用&连接起来
2.POST 方式传递的时候，表单

里面不需要 method=”post” action=”" 这些东西
3.参数经过ajax 传到php里，必然是utf8的，请注意转码。
一般情况下是可以防止php ajax乱码的。

php 参数传递以及php获取url参数之后的较合理安排

July 21st, 2008php技巧 No Comments

php 传参数，有两种方式GET 和POST，今天说的是url里面的参数传递，php get参数方法
举例一下，index.php?do=fly
$_GET[’do’] 这样就能取到fly这个值了，这个时候，我们php url的参数传递的一个特点就出来了
1.很明显，它是明文的，所以它是不保密的哦
问题来了，我要保密怎么办？以面的参数为例，你可以把fly算成另外的值
直观点就是：fly加密得到 abcdef 这个值 也就是说 abcdef在你的程序里就代表了fly这个值，而对外人来说就是无意义的值了。。。(说的好罗嗦啊。。。。。)

2.参数的合理安排
php参数传递来后的合理安排，这个是从Comsenz Inc. 出的ucenter home 里面学来的。
废话不多说，看源代码片段，全代码请自行下载了～

1
2
3
4
5
6
7
8
9

//以space.php为例
//允许动作
$dos = array('feed', 'doing', 'blog', 'album', 'thread', 'mtag', 'friend', 'wall', 'tag', 'notice', 'share', 'home', 'pm', 'app');
 
//...省略数句，直接看这个
$do = (!empty($_GET['do']) && in_array($_GET['do'], $dos))?$_GET['do']:'index';
 
//最后根据动作的值分到其他模块
include_once(S_ROOT."./source/space_{$do}.php");

要虚心学习这段程序的大方向，:-）

它是这个意思：space.php 这个执行脚本，只允许传递$dos数组里的存在的值
比如如果脚本space.php这样传递了参数: space.php?do=feed，那么上面的代码将会直接冲向 space_feed.php去执行！
这样我觉得至少有两个好处
1.一般可以无视用户传来的不合理值，因为它会默认space.php?do=index，看看中间那句(老实说，我是不常用，不过自此以后，我要开始用了)
2.减少space.php的文件大小，这个怎么说呢？
假设你原来有do=index(假设代码量10k) 和 do=blog(假设代码量5k) 两个值
如果不按照上面的方法”分流”的话，那么space.php的代码量就是 do=index + do=blog 约等于15k了
如果”分流”的话 space.php 1k space_index.php 10k space_blog.php 5k
看见了吗？你做space.php?do=blog 这个动作的时候，只需要执行 space.php + space_blog.php = 1+5 = 6k的代码量，而不需要把整个15k的总代码都弄进来搅。

说了一大通不知道对不对，不过这样的大方向，我看是值得学习的。

让js每次都读取新内容忽略缓存

July 7th, 2008php技巧 No Comments

我有这么一段代码

1

<script src="show.php" type="text/javascript"></script>

 
这个是在网页加载的同时，暗地里执行一段php，为网页里的js 参数赋值的
在调试过程中，我就发现：改一次show.php，按F5，实际上是没有变化的，必须按ctrl+F5(忽略缓存强制更新)。
这是十分讨厌的问题。
而且如果你结合ajax的话，会发现，其实后台数据已经变化好了，但是你按F5，仍然是不更新的。
问题就出在这个暗中调用的show.php，每次都是读取缓存，造成数据不更新。

解决的方向一般是，show.php每次都加上不同的参数，比如show.php?time=time() 这样，ie这个笨蛋就认为这是个新链接，它就会去读取新的内容了。
有两种带入的参数可选
1.随机数
2.时间数 (用毫秒的)
上面的代码大概改成类似这个样子

1
2

<script src="show.php?time={$time}" type="text/javascript"></script>
//其中{$time} 你喜欢用什么生成就用什么生成。
Older Entries
Icons by N.Design Studio. Designed By Ben Swift. Powered by WordPress and Free WordPress Themes
Entries RSS Comments RSS Log in