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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门到实战

Flutter从配置安装到填坑指南详解

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

2.6K5
来自专栏zaking's

走近webpack(4)--css相关拓展

  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要...

42010
来自专栏PHP在线

[技巧]丰富的phpstorm编辑器配色方法

1 打开编辑器 phpstorm菜单找到preferences,MAC快捷键[command+,],Editor->Colors&font->font 在此处设...

3815
来自专栏Golang语言社区

【前端编程】加载第三方JS的各种姿势

从网站开发者的角度来看,第三方JS相比第一方JS有如下几个不同之处: 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存(Cache-C...

3499
来自专栏守望轩

Visual Studio 2008 每日提示(十二)

#111、定义最近使用的列表中显示项的数目 原文链接:How to customize the number of items shown in the re...

3704
来自专栏前端新视界

关于 JS 拖拽功能的冲突问题及解决方法

前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生...

47511
来自专栏CRPER折腾记

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

再打一次辟谣:NG2->NG4不是重构,只是常规升级【统一版本而已,目前路由是3.x】, NG团队说以后不再以版本号为核心,统称angular,下半年NG5要出...

821
来自专栏CRPER折腾记

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天...

1092
来自专栏Wordpress专用主机|主题模板|必备插件

如何手动配置WordPress浏览器缓存

5755
来自专栏FreeBuf

闲话文件上传漏洞

文件上传漏洞是web安全中经常利用到的一种漏洞形式。这种类型的攻击从大的类型上来说,是攻击 数据与代码分离原则 的一种攻击。 一些web应用程序中允许上传图片,...

4577

扫码关注云+社区

领取腾讯云代金券