当前位置:首页 > PHP教程 > php上传下载 > 列表

PHP+Ajax实现文件无刷新上传文件代码

发布:smiling 来源: PHP粉丝网  添加日期:2014-08-26 10:16:57 浏览: 评论:0 

PHP+jQuery Ajax文件上传实例,因为看到一些朋友询问如何实现PHP环境下的网页上传功能,自己这几天刚用了jQuery_upload_multiple上传插件,所以在这里把用法给大家说一下.

要实现基于这个插件的上传功能,其实挺简单,需要jquery就行了,另外还有一个上传文件时的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. <title>Easy Ajax FormData Upload Multiple Images</title> 
  5. <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script><!--此处可引用你实际路径的jquery插件--> 
  6. </head> 
  7. <body> 
  8. <style> 
  9.  #feedback{width:1200px;margin:0 auto;} 
  10.  #feedback img{float:left;width:300px;height:300px;} 
  11.  #ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;} 
  12.  #addpicContainer{margin-left:5px;} 
  13.  #ZjmainstaySignaturePicture img{width: 535px;} 
  14.  #addpicContainer img{float: left;} 
  15.  .loading{display:none;background:url("http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;} 
  16. </style> 
  17. <div id="addpicContainer"> 
  18.  <!-- 利用multiple="multiple"属性实现添加多图功能 --> 
  19.  <!-- position: absolute;left: 10px;top: 5px;只针对本用例将input隐至图片底下。--> 
  20.  <!-- height:0;width:0;z-index: -1;是为了隐藏input,因为Chrome下不能使用display:none,否则无法添加文件 --> 
  21.  <!-- onclick="getElementById('inputfile').click()" 点击图片时则点击添加文件按钮 --> 
  22.  <img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="点击添加图片" alt="点击添加图片" src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg"> 
  23.  <input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/> 
  24.  <span class="loading"></span> 
  25. </div> 
  26. <div id="feedback"></div><!-- 响应返回数据容器 --> 
  27. <script type="text/javascript"> 
  28. $(document).ready(function(){ 
  29.  //响应文件添加成功事件 
  30.  $("#inputfile").change(function(){ 
  31.   //创建FormData对象 
  32.   var data = new FormData(); 
  33.   //为FormData对象添加数据 
  34.   $.each($('#inputfile')[0].files, function(i, file) { 
  35.    data.append('upload_file'+i, file); 
  36.   }); 
  37.   $(".loading").show(); //显示加载图片 
  38.   //发送数据 
  39.   $.ajax({ 
  40.    url:'submit_form_process.php', 
  41.    type:'POST', 
  42.    data:data, 
  43.    cache: false, 
  44.    contentType: false, //不可缺参数 
  45.    processData: false,  //不可缺参数 
  46.    success:function(data){ 
  47.     data = $(data).html(); 
  48.     //第一个feedback数据直接append,其他的用before第1个( .eq(0).before() )放至最前面。 
  49.     //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签,否则图片无法显示。 
  50.     if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>')); 
  51.     else $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>')); 
  52.     $(".loading").hide(); //加载成功移除加载图片 
  53.    }, 
  54.    error:function(){ 
  55.     alert('上传出错'); 
  56.     $(".loading").hide(); //加载失败移除加载图片 
  57.    } 
  58.   }); 
  59.  }); 
  60. }); 
  61. </script> 
  62. </body> 
  63. </html> 

接下来是上传图片的PHP文件代码,文件名:submit_form_process.php,代码如下:

  1. <?php 
  2. header('content-type:text/html charset:utf-8'); 
  3. $dir_base = "./files/"//文件上传根目录 
  4. //没有成功上传文件,报错并退出。 
  5. if(emptyempty($_FILES)) { 
  6.  echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>"
  7.  exit(0); 
  8. $output = "<textarea>"
  9. $index = 0; //$_FILES 以文件name为数组下标,不适用foreach($_FILES as $index=>$file) 
  10. foreach($_FILES as $file){ 
  11.  $upload_file_name = 'upload_file' . $index;//对应index.html FomData中的文件命名 
  12.  $filename = $_FILES[$upload_file_name]['name']; 
  13.  $gb_filename = iconv('utf-8','gb2312',$filename); //名字转换成gb2312处理 
  14.  //文件不存在才上传 
  15.  if(!file_exists($dir_base.$gb_filename)) { 
  16.   $isMoved = false;  //默认上传失败 
  17.   $MAXIMUM_FILESIZE = 1 * 1024 * 1024;  //文件大小限制 1M = 1 * 1024 * 1024 B; 
  18.   $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";  
  19.   if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE &&  
  20.    preg_match($rEFileTypesstrrchr($gb_filename'.'))) {  
  21.    $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);  //上传文件 
  22.   } 
  23.  }else
  24.   $isMoved = true;//已存在文件设置为上传成功 
  25.  } 
  26.  if($isMoved){ 
  27.   //输出图片文件<img>标签 
  28.   //注:在一些系统src可能需要urlencode处理,发现图片无法显示, 
  29.   //    请尝试 urlencode($gb_filename) 或 urlencode($filename),不行请查看HTML中显示的src并酌情解决。 
  30.   $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";//开源代码phpfensi.com 
  31.  }else { 
  32.   $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>"
  33.  } 
  34.  $index++; 
  35. echo $output."</textarea>"
  36. ?> 

Tags: PHP+Ajax 无刷新上传

分享到: