iframe实现页面无刷新上传文件(PHP)----备忘
之前做一个文件上传的,由于那段时间写ajax比较多,所以就想利用Ajax来实现,后来发现,Ajax没法实现文件上传,
后来百度之,这里做个备忘。
提示:利用form表单的target属性和iframe
一、上传文件的一个php方法。
该方法接受一个$file参数,该参数为从客户端获取的$_FILES变量,返回重新命名后的文件名,如果上传失败,则返回空字符串。
php代码
function uploadFile($file) {
// 上传路径 $destinationPath = "./upload/";
if (!file_exists($destinationPath)){
mkdir($destinationPath , 0777); }
//重命名
$fileName = date('YmdHis') . '_' . iconv('utf-8' , 'gb2312' , basename($file['name']));
if (move_uploaded_file($file['tmp_name'], $destinationPath . $fileName)) { return iconv('gb2312' , 'utf-8' , $fileName);
} return '';
}
二、客户端HTML代码
这里正是技巧所在,添加另一个iframe来实现。表单标签form定义了一个属性target,该属性解释如下:
[pre]target属性:
_blank ---------- 新开窗口
_self ----------- 自身
_top ------------ 主框架
_parent --------- 父框架
自定义名字 ----- 出现于框架结构,将会在该名称的框架内打开链接
本例中采用iframe名字,所以表单在提交时会在iframe内打开链接(即无刷新,确切的说应该是
感觉无刷新)
在表单提交时,调用startUpload方法,当然这是JS定义的。
[/pre][pre]此外我们还定义一个span来显示提示信息。代码如下:
[/pre]xhtml代码
<form id="upForm" action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload()"> 导入文件:<input type="file" name="myfile" id="myfile" />
<input type="submit" name="submitBtn" value="导入" /> <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;">iframe>
form> <span id="info">span>
三、JS部分
这部分比较简单,只是显示提示信息
javascript代码
function startUpload() {
var spanObj = document.getElementById("info"); spanObj.innerHTML = " 开始上传";
}
function stopUpload(responseText){ var spanObj = document.getElementById("info");
spanObj.innerHTML = " 上传成功; spanObj.innerHTML = responseText;
}
接下来就要看服务器端得处理了。
四、服务器段处理部分
php代码
$file = $_FILES['myfile']; $fileName = uploadFile($file);
$result = readFromFile("./upload/" . $fileName);
此外在后面还应该加上一句JS代码用来调用stopUpload方法。
javascript代码
window.top.window.stopUpload("");
最后在补上php中的readFromFile方法,就大功告成了。
php代码
function readFromFile($target_path) {
// 读取文件内容 $file = fopen($target_path,'r') or die("unable to open file");
$fileContent = ''; while(!feof($file))
{ $str = fgets($file);
$fileContent .= $str; }
fclose($file); return $fileContent;
}