【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

文件上传在项目中，一般有两个用武之地，分别为设置用户的头像和上传附件。本节我们演示如果进行用户头像的上传。

因为一个用户单独并且唯一对应了一个头像，是一对一的关系，所以我们需要去给tm_users表添加一个头像字段 – header 。

点击保存按钮，完成表字段的添加。

本节中的头像上传，可以对图像进行裁剪，最终上传到服务器的是一个经过裁剪后的图像。

图像是保存在磁盘上的，数据库只负责保存头像的地址。

现在把 5-10上课资料文件夹中的imageUpload文件夹拷贝到5-10文件夹中。

imageUpload 是一个支持图像裁剪的，以Javascript技术和PHP技术为支撑的图像上传组件。（这个组件是github上找来的。）

其目录结构如下：

打开用户管理页面：

当下要做的事情就是画一个设置头像的按钮，当选中一条数据，再点击设置头像，就会跳出一个上传头像的页面。

设置头像按钮的点击事件为 openHeaderDialog() , 我们计划点击这个按钮，就弹出一个对话框。所以，我们还需要去画一个dialog面板。

将以下代码粘贴到body标签的最末端。

src的地址为：../imageUpload/index.html

然后，编写打开上传头像页面的方法：

目前为止，我们可以成功的把图片保存到对应的upload文件夹中，但是还无法将图片的地址保存到tm_users表。

在本案例中，上传头像的index.html是嵌套在外面的userManage.html页面中的。

那么，在index.html 里面可以直接访问到 userManage.html 页面里的某一个方法。（前提是，这个方法是全局的。）

index.html：

修改openHeaderDialog

var userid = null;
function openHeaderDialog(){

	var rows = $("#grid0").datagrid("getSelections");

	if(rows.length != 1){
		$.messager.alert("系统提醒","请选择一位要设置头像的用户！");
		return;
	}

	userid = rows[0].id; //获取当前勾选用户的ID

	//只有当你选中一条数据的时候，才打开上传头像的页面
	$("#dialog2").dialog("open");

}

通过parent可以访问到父页面中的某一个方法。



后台：



后台文件基本同deleteUser.php，只需要修改少量的代码即可。

<?php

	$resultData = array();
	$resultData["errCode"] = 0;
	$resultData["errMsg"] = "";

	//连接MySQL数据库
	$conn = mysql_connect("localhost","root","");
	$db = mysql_select_db("test",$conn);
	mysql_query("set names utf8");

	$id = $_POST["id"];
	$header = $_POST["header"];

	$sql = "update tm_users set header = '$header' where id = $id;";

	mysql_query($sql) or die(err());

	echo json_encode($resultData);

	function err(){
		$resultData["errCode"] = -1;
		$resultData["errMsg"] = mysql_error();
		echo json_encode($resultData);
		return;
	}

?>

源码获取：https://www.jianshu.com/p/4977bd0073d5