PHP的文件上传操作
先来看效果图
上图为上传文件前
上图为上传文件后
核心知识 - 文件上传操作的基本步骤
1、构建基本的表单,并针对表单进行相关处理
2、在“上传文件”数据发生变化的时候,使用AJAX发送请求
3、PHP获得到文件的基本信息
4、PHP执行SQL,将获取的基本信息存入数据库
5、PHP返回基本的图片路径
6、使用DOM操作设置预览图的路径
最核心的知识,其实依旧是知识的逻辑。
前期需要有什么?
最基本的数据库和最基本的文件夹结构还是要有的。
此处基本的文件夹结构如下图:
数据库相关准备如下图:
构建基本的表单,并针对表单进行相关处理
<form action="edit.php" class="form" class="add-form">
<div class="control">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="HTML5学堂">
</div>
<div class="control">
<label>头像:</label>
<div>
<img src="" alt="需要上传的图片" id="face-img">
</div>
<!-- 与upload-form表单的input相关联 -->
<label for="face" class="face">上传图片</label>
</div>
<div class="form-actions">
<input type="submit">
</div>
</form>
<!-- 文件上传的表单 -->
<form action="file.php" method="post" class="upload-form" enctype="multipart/form-data">
<div>
<input type="file" name="file" id="face">
</div>
</form>
如果需要实现文件的上传,需要为表单form标签增加一个属性:enctype。表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,实现文件上传。
在“上传文件”数据发生变化的时候,使用AJAX发送请求
基本代码如下:
<script type="text/javascript">
$("#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) {
}
});
}
})
</script>
为上传文件的input绑定change事件,监测值是否为空,如果不为空,则获取到要提交的地址,进行数据的提交。此处涉及到两个知识点,其一在于$.trim()方法,该方法是JQ的字符串方法之一,主要用于去掉字符串首尾的空格。第二个知识点,在于此处需要使用jquery.form.js插件辅助完成AJAX对数据的提交——ajaxSubmit方法。
PHP获得到文件的基本信息
<?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操作设置预览图的路径
具体代码如下:
$("#face-img").attr("src", response.url);
最后 奉上完全版本的代码
HTML文件 - 基本结构与JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - 刘国利 尹鹏 - 独行冰海 尹小芃槑</title>
<link rel="stylesheet" href="css/reset.css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<style>
.face {
border: 1px solid red;
}
.upload-form {
display: none;
}
</style>
</head>
<body>
<form action="edit.php" class="form" class="add-form">
<div class="control">
<label for="username">用户名:</label>
<input type="text" name="username" id="username">
</div>
<div class="control">
<label>头像:</label>
<div>
<img src="" alt="需要上传的图片" id="face-img">
</div>
<!-- 与upload-form表单的input相关联 -->
<label for="face" class="face">上传图片</label>
</div>
<div class="form-actions">
<input type="submit">
</div>
</form>
<!-- 文件上传的表单 -->
<form action="file.php" method="post" class="upload-form" enctype="multipart/form-data">
<div>
<input type="file" name="file" id="face">
</div>
</form>
<script type="text/javascript">
$("#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) {
$("#face-img").attr("src", response.url);
}
});
}
})
</script>
</body>
</html>
PHP文件 —— 此处命名采用的是file.php
<?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;
// 插入数据库
mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')");
echo json_encode($arr); // 返回JSON数据,里面有文件的路径
?>
欢迎沟通交流~HTML5学堂
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- Qt读写文件(2种方式)实现详解
- 字符串匹配 - KMP算法
- c# 判断文件是否发生了变化
- C# 用IrisSkin4.dll美化你的WinForm
- Oracle参数解析(shared_pool_size)
- C# GTS四轴运动控制器实例(固高科技步进电机不带编码器)
- Oracle参数解析(pre_page_sga)
- C#简单爬取数据(.NET使用HTML解析器NSoup和正则两种方式匹配数据)
- [WPF] WPF做的漂亮的登陆界面[附源码]
- C#自定义控件的创建
- Oracle参数解析(processor_group_name)
- [Oracle故障处理]记一次PX msg pool 4031错误的处理
- WPF的布局-Grid(表格布局)
- C# 通过遍历设置控件属性
- C# 软件开机启动