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

Posted 2020-11-14 分享创造快乐，技术成就梦想

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

因为一个用户单独并且唯一对应了一个头像，是一对一的关系，所以我们需要去给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