前端技术分享-码匠 极客编程技术分享

您当前位于：PHP后台技术 ——> PHP入门 - PHP文件的上传操作
上一篇：PHP入门 - PHP对数据库的基本操作 下一篇：PHP相关知识 - 如何保证网页文件编码正确

PHP入门 - PHP文件的上传操作

2015/08/24 17:57:41 | 作者：HTML5学堂（码匠） | 分类：PHP后台技术 | 关键词：PHP,图片上传,文件上传,$_FILES

PHP的文件上传操作

HTML5学堂：关于文件上传，主要包括“构建基本表单”-“使用AJAX发送请求，上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言，返回基本图片路径”-“使用DOM操作设置预览图路径”。一起来开始今天的学习吧~！

刘国利 - 独行冰海：原本这节课计划是给5班孩子讲的，但是，今日课讲得实在有些不愉快，只是感觉心好累，具体原因就不提了，直接上文章吧~

先来看效果图

上传前的初始状态
上图为上传文件前
上传图片后的预览图
上图为上传文件后

核心知识 - 文件上传操作的基本步骤

1、构建基本的表单，并针对表单进行相关处理

2、在“上传文件”数据发生变化的时候，使用AJAX发送请求

3、PHP获得到文件的基本信息

4、PHP执行SQL，将获取的基本信息存入数据库

5、PHP返回基本的图片路径

6、使用DOM操作设置预览图的路径

最核心的知识，其实依旧是知识的逻辑。

前期需要有什么？

最基本的数据库和最基本的文件夹结构还是要有的。

此处基本的文件夹结构如下图：
基本文件夹结构

数据库相关准备如下图：

数据库准备

构建基本的表单，并针对表单进行相关处理

  1. <form action="edit.php" class="form" class="add-form">
  2.     <div class="control">
  3.         <label for="username">用户名：</label>
  4.         <input type="text" name="username" id="username" value="HTML5学堂">
  5.     </div>
  6.     <div class="control">
  7.         <label>头像：</label>
  8.         <div>
  9.             <img src="" alt="需要上传的图片" id="face-img">
  10.         </div>
  11.         <!-- 与upload-form表单的input相关联 -->
  12.         <label for="face" class="face">上传图片</label>
  13.     </div>
  14.     <div class="form-actions">
  15.         <input type="submit">
  16.     </div>
  17. </form>
  18.  
  19. <!-- 文件上传的表单 -->
  20. <form action="file.php" method="post" class="upload-form" enctype="multipart/form-data">
  21.     <div>
  22.         <input type="file" name="file" id="face">
  23.     </div>
  24. </form>

如果需要实现文件的上传，需要为表单form标签增加一个属性：enctype。表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，实现文件上传。

在“上传文件”数据发生变化的时候，使用AJAX发送请求

基本代码如下：

  1. <script type="text/javascript">
  2.     $("#face").on("change", function(){
  3.         // 当值发生变化，且不为空的时候，通过AJAX提交表单
  4.         if($.trim($(this).val()) != "") {
  5.             var url = $(".upload-form").attr("action");
  6.             // 使用jquery.form.js的AJAX提交表单
  7.             // API文档： https://github.com/malsup/form
  8.             $(".upload-form").ajaxSubmit({
  9.                 url : url,
  10.                 type: "POST",
  11.                 success: function(response) {
  12.                 }
  13.             });
  14.         }
  15.     })
  16. </script>

为上传文件的input绑定change事件，监测值是否为空，如果不为空，则获取到要提交的地址，进行数据的提交。此处涉及到两个知识点，其一在于$.trim()方法，该方法是JQ的字符串方法之一，主要用于去掉字符串首尾的空格。第二个知识点，在于此处需要使用jquery.form.js插件辅助完成AJAX对数据的提交——ajaxSubmit方法。

关于插件，可以点击此处——>jquery.form.js API文档以及插件下载

PHP获得到文件的基本信息

  1. <?php
  2.     header('Content-Type:text/json;charset=utf-8');
  3.  
  4.     define('PATH', $_SERVER['DOCUMENT_ROOT']);    // 定义文件路径
  5.     define('MYSQL_DATABASE', 'student'); // 定义要连接的数据库
  6.     define('MYSQL_HOST', 'localhost'); // 定义主机地址
  7.     define('MYSQL_USER', 'root'); // 定义用户名
  8.     define('MYSQL_PASSWORD', ''); // 定义密码
  9.     define('AUTHOR', 'HTML5学堂');
  10.     define('AUTHOR_URL', 'http://www.h5course.com');
  11.  
  12.     $conn = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die("conn err!");
  13.     mysql_query("set names 'utf8'");
  14.     mysql_select_db(MYSQL_DATABASE, $conn);
  15.     $fileUrl = "";
  16.     $uploadfile = "img/".$_FILES["file"]["name"];
  17.     if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadfile)){
  18.         $fileUrl = "img/".$_FILES["file"]["name"]; // 数据库图片路径
  19.     }
  20.     $arr["url"] = $fileUrl;
  21. ?>

首先需要注意的是，最后要返回JSON类型内容，因此header命令中使用json类型。之后的数据库连接我就不再讲解了，如果还不是太清楚，可以查看《PHP对数据库的相关操作》

在PHP当中，通过$_FILES这个超全局变量进行文件相关信息的获取，使用$_FILES["file"]["name"]获取文件的名字，使用$_FILES["file"]["tmp_name"]进行临时路径的获取，使用move_upload_file()方法进行文件路径的重新设置。

该函数的作用是把上传的文件移动到一个新的位置。有两个参数，第一个参数是你上传后的临时文件名，由系统自动生成 —— $_FILE["file"]["tmp_name"];其中的file为你前台文件上传表单的名称。第二个参数就是包含有路径的新的文件名。如："h5course/data.jpg";

PHP执行SQL，将获取的基本信息存入数据库

具体代码如下：

  1. // 插入数据库
  2. mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')");

PHP返回基本的图片路径

将获取到的地址进行JSON编码，并使用echo语句将结果输出出来。具体代码如下：

  1. echo json_encode($arr); // 返回JSON数据，里面有文件的路径

使用DOM操作设置预览图的路径

具体代码如下：

  1. $("#face-img").attr("src", response.url);

欢迎沟通交流~HTML5学堂

最后 奉上完全版本的代码

HTML文件 - 基本结构与JS

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - 刘国利 尹鹏 - 独行冰海 尹小芃槑</title>
  6.     <link rel="stylesheet" href="css/reset.css">
  7.     <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
  8.     <script type="text/javascript" src="js/jquery.form.js"></script>
  9.     <style>
  10.         .face {
  11.             border: 1px solid red;
  12.         }
  13.         .upload-form {
  14.             display: none;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <form action="edit.php" class="form" class="add-form">
  20.         <div class="control">
  21.             <label for="username">用户名：</label>
  22.             <input type="text" name="username" id="username">
  23.         </div>
  24.         <div class="control">
  25.             <label>头像：</label>
  26.             <div>
  27.                 <img src="" alt="需要上传的图片" id="face-img">
  28.             </div>
  29.             <!-- 与upload-form表单的input相关联 -->
  30.             <label for="face" class="face">上传图片</label>
  31.         </div>
  32.         <div class="form-actions">
  33.             <input type="submit">
  34.         </div>
  35.     </form>
  36.  
  37.     <!-- 文件上传的表单 -->
  38.     <form action="file.php" method="post" class="upload-form" enctype="multipart/form-data">
  39.         <div>
  40.             <input type="file" name="file" id="face">
  41.         </div>
  42.     </form>
  43.     <script type="text/javascript">
  44.         $("#face").on("change", function(){
  45.             // 当值发生变化，且不为空的时候，通过AJAX提交表单
  46.             if($.trim($(this).val()) != "") {
  47.                 var url = $(".upload-form").attr("action");
  48.                 // 使用jquery.form.js的AJAX提交表单
  49.                 // API文档： https://github.com/malsup/form
  50.                 $(".upload-form").ajaxSubmit({
  51.                     url : url,
  52.                     type: "POST",
  53.                     success: function(response) {
  54.                         $("#face-img").attr("src", response.url);
  55.                     }
  56.                 });
  57.             }
  58.         })
  59.     </script>
  60. </body>
  61. </html>

PHP文件 —— 此处命名采用的是file.php

  1. <?php
  2.     header('Content-Type:text/json;charset=utf-8');
  3.  
  4.     define('PATH', $_SERVER['DOCUMENT_ROOT']);    // 定义文件路径
  5.     define('MYSQL_DATABASE', 'student'); // 定义要连接的数据库
  6.     define('MYSQL_HOST', 'localhost'); // 定义主机地址
  7.     define('MYSQL_USER', 'root'); // 定义用户名
  8.     define('MYSQL_PASSWORD', ''); // 定义密码
  9.     define('AUTHOR', 'HTML5学堂');
  10.     define('AUTHOR_URL', 'http://www.h5course.com');
  11.  
  12.     $conn = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die("conn err!");
  13.     mysql_query("set names 'utf8'");
  14.     mysql_select_db(MYSQL_DATABASE, $conn);
  15.  
  16.  
  17.     $fileUrl = "";
  18.     $uploadfile = "img/".$_FILES["file"]["name"];
  19.     if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadfile)){
  20.         $fileUrl = "img/".$_FILES["file"]["name"]; // 数据库图片路径
  21.     }
  22.     $arr["url"] = $fileUrl;
  23.     // 插入数据库
  24.     mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')");
  25.     echo json_encode($arr); // 返回JSON数据，里面有文件的路径
  26. ?>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：PHP入门 - PHP对数据库的基本操作 下一篇：PHP相关知识 - 如何保证网页文件编码正确