php的入门是html5,PHP入门 - PHP文件的上传操作

最新推荐文章于 2021-03-22 09:26:30 发布

Noire02

最新推荐文章于 2021-03-22 09:26:30 发布

阅读量77

点赞数

文章标签： php的入门是html5

PHP的文件上传操作

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

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

先来看效果图

上图为上传文件前

上图为上传文件后

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

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

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

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

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

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

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

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

前期需要有什么？

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

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

20150824298.html

数据库相关准备如下图：

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

用户名：

头像：

需要上传的图片

上传图片

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

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

基本代码如下：

$("#face").on("change", function(){

// 当值发生变化，且不为空的时候，通过AJAX提交表单

if($.trim($(this).val()) != "") {

var url = $(".upload-form").attr("action");

// 使用jquery.form.js的AJAX提交表单

// API文档： https://github.com/malsup/form

$(".upload-form").ajaxSubmit({

url : url,

type: "POST",

success: function(response) {

}

});

}

})

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

PHP获得到文件的基本信息

header('Content-Type:text/json;charset=utf-8');

define('PATH', $_SERVER['DOCUMENT_ROOT']); // 定义文件路径

define('MYSQL_DATABASE', 'student'); // 定义要连接的数据库

define('MYSQL_HOST', 'localhost'); // 定义主机地址

define('MYSQL_USER', 'root'); // 定义用户名

define('MYSQL_PASSWORD', ''); // 定义密码

define('AUTHOR', 'HTML5学堂');

define('AUTHOR_URL', 'http://www.h5course.com');

$conn = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die("conn err!");

mysql_query("set names 'utf8'");

mysql_select_db(MYSQL_DATABASE, $conn);

$fileUrl = "";

$uploadfile = "img/".$_FILES["file"]["name"];

if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadfile)){

$fileUrl = "img/".$_FILES["file"]["name"]; // 数据库图片路径

}

$arr["url"] = $fileUrl;

首先需要注意的是，最后要返回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，将获取的基本信息存入数据库

具体代码如下：

// 插入数据库

mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')");

PHP返回基本的图片路径

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

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

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