php无刷新文件上传程序代码

六月 17, 2019 | views
Comments 0

文件上传最简单的就是一个表单用户选择图片之后点击上传了,如果希望用户体验好点,我们可以使用ajax或iframe来上传了,下面一起来看一个例子.

在一个网站项目中,为了得到更好的用户体验,很多地方都要处理成异步无刷新的效果,此文件上传范例是利用一个隐藏的框架iframe做桥梁,实现主体页面上传文件无刷新的效果.

其实本范例也不是真正的异步效果,但是也是可以达到无刷新效果的,而且这种方法是实现php无刷新上传文件最快捷,最简单的方法,所以何乐而不为呢.

html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>php实现无刷新文件上传源码-代潇瑞博客</title> 
  6. <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
  7. <script type="text/javascript"> 
  8.  function ajax_upload(fname){ 
  9.   if(fname){ 
  10.    $(".label1").html("上传成功：("+fname+")"); 
  11.    var obj = document.getElementById('upfile'); 
  12.    obj.outerHTML=obj.outerHTML; 
  13.   }else{ 
  14.    $(".label1").html("上传失败！！"); 
  15.   } 
  16.   $("#upButton").val("上 传").removeAttr("disabled"); 
  17.  } 
  18.  
  19.  function check_file(){ 
  20.   if($("#upfile").val()==""){ 
  21.    $(".label1").html("请先选择一个文件！"); 
  22.    return false; 
  23.   }else{ 
  24.    $("#upButton").val("上传中...").attr("disabled","disabled"); 
  25.    return true; 
  26.   } 
  27.  } 
  28. </script> 
  29. </head> 
  30. <body> 
  31. <p><input type="text" /></p> 
  32. <form action="deal_upload.php" method="post" target="upimgf" enctype="multipart/form-data" onsubmit="return check_file()"> 
  33. <p>请选择图片：<input type="file" name="img" id="upfile" /></p> 
  34. <p><label class="label1" style="color:red;"></label></p> 
  35. <p><input type="submit" value="上 传" id="upButton" /></p> 
  36. </form> 
  37. <iframe name="upimgf" style="display:none;"></iframe> 
  38. </body> 
  39. </html> 

php代码:

  1. <?php 
  2.  
  3.  header("Content-type:text/html;charset=utf-8"); 
  4.  
  5.  $up_file = $_FILES['img']; 
  6.  $file_name = $up_file['name']; 
  7.  //print_r($file_name); 
  8.  if(move_uploaded_file($up_file['tmp_name'],iconv("utf-8","gb2312",$file_name))){ //phpfensi.com 
  9.   echo "<script> parent.ajax_upload('".$file_name."'); </script>"; 
  10.  }else{ 
  11.   echo "<script> parent.ajax_upload(''); </script>"; 
  12.  } 
  13. ?> 

当然上在这段上传没有做任何的一个安全验证了,我们如果要处理,可以进行一些处理　了.



zend