posts - 99,  comments - 16,  trackbacks - 0

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

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

posted on 2018-06-08 12:50 剽悍一小兔 阅读(...) 评论(...) 编辑 收藏