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

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

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

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

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

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

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

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

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

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

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

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

其目录结构如下:

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

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

打开用户管理页面:

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

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

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

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

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

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

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

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

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

然后,编写打开上传头像页面的方法:

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

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

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

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

index.html:

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

修改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可以访问到父页面中的某一个方法。

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

后台:

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

后台文件基本同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

上一篇:卸载oracle之后,如何清除注册表


下一篇:JavaScript的妙与乐(一)之 函数优化