文件上传在项目中，一般有两个用武之地，分别为设置用户的头像和上传附件。本节我们演示如果进行用户头像的上传。
因为一个用户单独并且唯一对应了一个头像，是一对一的关系，所以我们需要去给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