您现在的位置:计算机技术学习网 > 技术中心 > WEB编程 > PHP >

php实现无刷新上传文件功能详解

来源:未知 责任编辑:责任编辑 发表时间:2013-11-18 20:55 点击:
前段时间做个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 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");
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • PHP测试
  • 十天学会php之第六天
  • 几种显示数据的方法的比较
  • 使用xmlhttp为网站增加域名查询功能
  • PHP+MYSQL+Javascript数据库查询结果的动态显示
  • 查找数组中指定键名的值
  • 用redis实现跨服务器session
  • 用新浪微博接口发送图片微博失败的原因
  • smarty局部缓存技术[源码分析]
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1