在这个特效横幅的web时代，作为phper也需要跟得上潮流。于是乎，着手研究无刷新上传+无刷新发布日志。 对于无刷新提交文字之类，jquery都已经提供了很好的功能。只需要.get / .post 就可以快速建立一个无刷新提交表单了。但是在文件上传方面，jquery明显遇到
在这个特效横幅的web时代，作为phper也需要跟得上潮流。于是乎，着手研究无刷新上传+无刷新发布日志。
对于无刷新提交文字之类，jquery都已经提供了很好的功能。只需要.get / .post 就可以快速建立一个无刷新提交表单了。但是在文件上传方面，jquery明显遇到难题了(HTML5加强了上传文件功能)。网上有使用iframe这种伪ajax上传文件方式，本文就不在这里讨论了。感兴趣的，可以到开源中国查找。
本文也不讲解thinkphp的无刷新提交日志（不懂的去看官网的示例代码）。主要在无刷新上传 + 无刷新发布日志 整合上。下面的全程讲解，都围绕thinkphp框架为主，原生PHP实现方式也相差不大。
网上比较流行的无刷新上传组建有：swfupload 和uploadify 。我是用uploadify的。
模板代码 index.html：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://redich.com/03/__ROOT__/test/js/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://redich.com/03/__ROOT__/test/js/jquery.form.js"></script>
<script>
$(function(){
$('#from').ajaxForm({
success: complete,
dataType: 'json'
});
function complete(data){
if (data.status==1){
$('#result').html(data.info).show();
$('#error').hide();
}else{
$('#error').html(data.info).show();
$('#result').hide();
}
}
});
</script>
<link rel="stylesheet" type="text/css" href="http://redich.com/03/__ROOT__/test/js/uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
</style>
<div id="warp">
<h1>上传文件和发表文章AJAX示例</h1>
<div id="reload"><a href="http://redich.com/03/__URL__/reload">重新提交文章</a></div>
<div id="result" style="display:none;"></div>
<div id="error" style="display:none;"></div>
<form id="from" action="__URL__/add" method="post">
<p><label for="title">标题</label></p>
<p><input type="text" name="title"></p>
<p><label for="author">作者名称</label></p>
<p><input type="text" name="author"></p>
<p><label for="content">内容</label></p>
<p><textarea name="content" rows="15"></textarea></p>
<div id="queue"></div>
<p><input id="file_upload" name="file_upload" type="file" multiple></p>
<div id="uploadsuccess" style="display:none;"></div>
<p><a href="javascript:%24('#file_upload').uploadify('upload')">上传</a>
<a href="javascript:%24('#file_upload').uploadify('cancel','*')">重置上传队列</a>
</p>
<p><input type="submit" value="发表" id="submit"></p>
</form>
<script type="text/javascript">
var img_id_upload=new Array();//初始化数组，存储已经上传的图片名
var i=0;//初始化数组下标
$(function() {
$('#file_upload').uploadify({
'swf' : '__ROOT__/test/js/uploadify.swf',
'uploader' : '__URL__/upload',
'auto' : false,//关闭自动上传
'multi' : false,//允许同时上传多张图
'buttonText' : '请选择图片',//设置按钮文本片
'queueSizeLimit' : 1,//上传队列最多显示多少个
'onUploadSuccess' : function(file, data, response) {
$('#uploadsuccess').html(data).show();
}
});
});
</script>
</div>
Action部分代码 IndexAction.php
<?php class IndexAction extends Action {
public function index(){
$this->display();
}
/*
*
*上传文件
*
*/
public function upload(){
import("ORG.Net.UploadFile");
$upload = new UploadFile();
$upload->maxSize = 10485760 ;
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');
$upload->savePath = 'test/';
if(!$upload->upload()) {
echo $upload->getErrorMsg();
exit;
}else{
//删除旧文件
if(session('?savename')){
if(file_exists('test/'.session('savename'))){
unlink('test/'.session('savename'));
session('savename',NULL);//清除session记录
}
}
$info = $upload->getUploadFileInfo();
session('savename',$info[0]['savename']);
}
echo '文件"'.$info[0]['name'].'"上传成功！<br>重新上传将删除刚才上传的文件。';
}
/*
*
*提交文章
*
*/
public function add(){
//防止重复提交
if(!session('?insid')){
$test['title'] = $this->input('title','请输入标题');
$test['author'] = $this->input('author','请输入作者名称');
$test['content'] = $this->input('content','请输入内容');
if(!session('?savename')){
$this->error('请选择上传的文件！');
}
$test['filename'] = session('savename');
$sql = M('test');
$result = $sql->add($test);
if($result !== false){
$last_id = $sql->getLastInsID();
session('insid',$last_id);//设置一个防重复提交的session insid
session('savename',NULL);//释放上传文件的session
$this->success('文章发表成功！');
}else{
$this->error('文章发表失败，请重新提交');
}
}else{
$this->error('请勿重复提交！');
}
}
/*
*
*重新提交文章
*
*/
public function reload(){
if(session('?savename')){//检查用户是否上传了文件。然后点击了重新提交文章。
if(file_exists('test/'.session('savename'))){
unlink('test/'.session('savename'));
session('savename',NULL);
}
}else{
session('savename',NULL);//释放上传文件的session
}
session('insid',NULL);
redirect(__APP__);//重定向
}
public function input($name,$erroinfo){
$name = $this->_POST($name,'trim,htmlspecialchars,strip_tags');
if(empty($name)){
$this->error($erroinfo);
return ;
}
return $name;
}
}说一下思路：
首先，通常用户是填写好内容后，选择好上传文件后，提交表单到服务后端，后端进行结果返回。因为用到无刷新上传，所以上传会成为第一个提交到后端处理的。
于是，我想到用session来作一个记录。虽然可以通过返回的结果放到隐藏input表单或者隐藏iframe里面，但是这样的做法很不安全。要是用户对表单的内容进行修改了，那么就会记录错误的文件了。在上述代码中，可以看到我有多次验证上传文件的session是否有设置。有则删除旧文件，再释放出来。
接着因为用到ajax提交表单内容，为了避免用户重复点击提交按钮，导致文章重复写入数据库。我使用了一个session来防止用户重复提交。尽管可以用js来讲按钮失效。但是这样的做法是极度不安全的。
最后，当用户再次点击重新提交文章后。会再次对上传文件的session检查一次。因为可能会存在这样的情况：用户提交了上传文件，但是没有点击提交按钮。这样就上传了一个没用文件到服务器了。检查完毕，再释放防止重复写入的session值。这里有一个BUG：就是要是用户直接关闭浏览器，那么文件就无法删除了= =||。这个各位就自己研究方案吧（给点提示：可以做一个判断，用户离开浏览器后，进行文件删除。因为只有上传成功后，上传文件session才是被释放的）。
文章尾部，我有一点疑问：uploadify为什么定义了错误信息后，还是会弹出英文错误的？难道只能直接改源码部分吗？如果你知道如何解决，请帖出代码指点一下我吧。谢过了
演示地址：http://redich.com/paoyapao/test/
下载地址：http://adf.ly/KYOH0
原文地址：thinkphp无刷新上传+无刷新发布日志, 感谢原作者分享。
