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

php+html5+ajax实现上传图片的方法

发布:smiling 来源: PHP粉丝网  添加日期:2021-08-05 10:14:23 浏览: 评论:0 

这篇文章主要介绍了php+html5+ajax实现上传图片的方法,对比分析了js原生及jQuery两种ajax调用上传图片的方法,以及php图片上传处理等技巧,需要的朋友可以参考下。

本文实例讲述了php+html5+ajax实现上传图片的方法,分享给大家供大家参考,具体如下:

  1. <?php 
  2. if (isset($_POST['upload'])) { 
  3.   var_dump($_FILES); 
  4.   move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat'); 
  5.   //header('location: test.php'); 
  6.   exit
  7. ?> 
  8.  
  9. <!doctype html> 
  10. <html lang="zh"
  11. <head> 
  12.   <meta charset="utf-8"
  13.   <title>HTML5 Ajax Uploader</title> 
  14.   <script src="jquery-2.1.1.min.js"></script> 
  15. </head> 
  16. <body> 
  17. <p><input type="file" id="upfile"></p> 
  18. <p><input type="button" id="upJS" value="用原生JS上传"></p> 
  19. <p><input type="button" id="upJQuery" value="用jQuery上传"></p> 
  20. <script> 
  21.   /*原生JS版*/ 
  22.   document.getElementById("upJS").onclick = function() { 
  23.     /* FormData 是表单数据类 */ 
  24.     var fd = new FormData(); 
  25.     var ajax = new XMLHttpRequest(); 
  26.     fd.append("upload", 1); 
  27.     /* 把文件添加到表单里 */ 
  28.     fd.append("upfile", document.getElementById("upfile").files[0]); 
  29.     ajax.open("post""test.php", true); 
  30.     ajax.onload = function () { 
  31.       console.log(ajax.responseText); 
  32.     }; 
  33.     ajax.send(fd); 
  34.   } 
  35.   /* jQuery 版 */ 
  36.   $('#upJQuery').on('click'function() { 
  37.     var fd = new FormData(); 
  38.     fd.append("upload", 1); 
  39.     fd.append("upfile", $("#upfile").get(0).files[0]); 
  40.     $.ajax({ 
  41.       url: "test.php"
  42.       type: "POST"
  43.       processData: false, 
  44.       contentType: false, 
  45.       data: fd, 
  46.       success: function(d) { 
  47.         console.log(d); 
  48.       } 
  49.     }); 
  50.   }); 
  51. </script> 
  52. </body> 
  53. </html>

Tags: php+html5+ajax

分享到: