前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

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

作者头像
剽悍一小兔
发布2018-06-08 11:03:10
6360
发布2018-06-08 11:03:10
举报

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

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

代码语言:javascript
复制
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,只需要修改少量的代码即可。

代码语言:javascript
复制
<?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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.06.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档