php实现无刷新上传文件功能详解_PHP教程
程序员文章站
2022-05-21 13:59:24
...
前段时间做个ajax的应用,其中涉及到一个上传文件,然后从文件中读取相关内容的操作。php上传文件不难,难就难在页面要无刷新,想来想去没什么招,后来baidu下,找到个方法,成功实现无刷新上传文件。我把思路整理下,和朋友们共享,也欢迎提出批评指导意见。
技巧:利用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表单的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代码
上一篇: MySQL字符串值的实际应用
下一篇: beforeEach实现路由跳转验证功能