现在的位置: 首页 -> PHP学习 -> php无刷新文件上传简单范例源码

php无刷新文件上传简单范例源码

2014-07-02 22:27 ⁄ 评论数 0 ⁄ 被浏览 7236 views+

看了一下网上做的无刷新文件上传都用了js插件，实际上还有另一种技术去实现php无刷新文件上传。就是用一个隐藏的iframe框架做容器，让刷新的动作发生在框架中，而不刷新当前页面，来达到无刷新的效果。其实根本没用到ajax，简单的框架加一些js代码就可以实现无刷新上传文件了。


效果演示：


php无刷新文件上传效果1

（未选择文件时会提示选择文件）


php无刷新文件上传效果2

（上传成功后，"123abc"仍然存在，则表明没有刷新）


实现这个功能，只用到了3个文件，一个静态界面页面，一个php处理页面，一个jquery库文件。


index.html文件：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>php实现无刷新文件上传源码-代潇瑞博客</title>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">

function ajax_upload(fname){

if(fname){

$(".label1").html("上传成功：("+fname+")");

var obj = document.getElementById('upfile');

obj.outerHTML=obj.outerHTML;

}else{

$(".label1").html("上传失败！！");

}

$("#upButton").val("上 传").removeAttr("disabled");

}

function check_file(){

if($("#upfile").val()==""){

$(".label1").html("请先选择一个文件！");

return false;

}else{

$("#upButton").val("上传中...").attr("disabled","disabled");

return true;

}

}

</script>

</head>


<body>


<p><input type="text" /></p>


<form action="deal_upload.php" method="post" target="upimgf" enctype="multipart/form-data" onsubmit="return check_file()">

<p>请选择图片：<input type="file" name="img" id="upfile" /></p>

<p><label class="label1" style="color:red;"></label></p>

<p><input type="submit" value="上 传" id="upButton" /></p>

</form>

<iframe name="upimgf" style="display:none;"></iframe>

</body>

</html>


deal_upload.php文件：


<?php

header("Content-type:text/html;charset=utf-8");

$up_file = $_FILES['img'];

$file_name = $up_file['name'];

//print_r($file_name);

if(move_uploaded_file($up_file['tmp_name'],iconv("utf-8","gb2312",$file_name))){

echo "<script> parent.ajax_upload('".$file_name."'); </script>";

}else{

echo "<script> parent.ajax_upload(''); </script>";

}

?>


源码下载：php无刷新上传文件范例源码.zip


其实整个技术的关键点在两个地方，第一个就是<form>中的target="upimgf"，意思是在框架中提交表单；第二个就是parent.ajax_upload()调用框架外的函数，从而可以对返回的值进行操作。

 

文章出自：https://www.daixiaorui.com/read/109.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。

您可能还会对这些文章感兴趣！

  1. 百度编辑器ueditor编辑修改内容后出现内容为空的现象
  2. php实现文章上一篇下一篇的sql语句
  3. thinkphp网站中所有的链接都带PHPSESSID的原因
  4. ecshop在iis下的伪静态规则范例
  5. php计算一个月,年,日后(前)的日期时间
  6. php获取页面运行使用内存的两个函数
  7. ecshop防止表单重复提交
  8. 怎么找到php配置文件php.ini的路径位置
php源码，小程序
php源码，小程序
php源码，小程序
php源码，小程序

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *

     

    返回首页

    申明：本站文字除标明出处外皆为作者原创，转载请注明原文链接。
    Copyright © 2013 代潇瑞博客-专注于PHP学习  粤ICP备13071969号-1