【php增删改查实例】- 第二十九节 用户头像变更

现在考虑的问题就是如何把头像上传的地方给圈出来,我们可以在这个DIV

下面新建一个DIV:

因为div是块级元素,所以会被上面的div挤下来,所以,我们可以给两个div都加上一个左浮动:

得到的效果,就是两个DIV在一起了。

于是,上传头像的区域就被划出来了,接下来,我们要在这个区域嵌套一层iframe,指向原来的头像上传页面。

最终我们要引入的就是这个index.html

<div class='header_con'>

    <iframe frameborder=0 scrolling='auto'  src="imageUpload/index.html" style='width:100%;height:100%'></iframe>

</div>

当图片上传成功的时候,就会调用父页面的saveImgToDb方法:

并且把上传图片的详细地址作为参数传递到了父页面。

那么,在父页面(user.php)中,就必须写一个saveImgToDb的方法:

修改后:

function saveImgToDb(header){

    var obj = {};
    obj.header = header; //用户头像地址

    $.post("user/saveImgToDb.php" , obj , function(data){

        if(data.errCode < 0){
            alert(data.errMsg);
            return;
        }


    },"json");

}

并且把上传图片的详细地址作为参数传递到了父页面。

那么,在父页面(user.php)中,就必须写一个saveImgToDb的方法:

修改后:

function saveImgToDb(header){

   var obj = {};
   obj.header = header; //用户头像地址

   $.post("user/saveImgToDb.php" , obj , function(data){

       if(data.errCode < 0){
           alert(data.errMsg);
           return;
       }


   },"json");

}

因为在个人详情页无法像之前的用户管理页面那样获取到userid,那么,我们需要去修改saveImgToDb.php 这个文件。思路:如果发现有id传过来,就用id去查询。如果没有,那说明是个人详情页提交的上传头像请求,我们就去session中获取username,用username来查询那个需要修改头像的用户数据。 saveImgToDb.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");

    if(isset($_POST["id"]) && $_POST["id"] != null){
        $id = $_POST["id"];
        $header = $_POST["header"];

        $sql = "update tm_users set header = '$header' where id = $id;";
        
    }else{
        session_start();
        $username = $_SESSION["username"];
        $header = $_POST["header"];

        $sql = "update tm_users set header = '$header' where username = '$username';";
    }

    

    mysql_query($sql) or die(err());

    echo json_encode($resultData);
    
    function err(){
        $resultData["errCode"] = -1;
        $resultData["errMsg"] = mysql_error();
        echo json_encode($resultData);
        return;
    }


?>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

使用IE6看老赵的博客——jQuery初探

  可能老赵很反感IE6,所以他在自己的博客里面做了点手脚,如果是IE6浏览他的博客的话,那么就会跳转到另一个页面。   很郁闷,看个博客吗,还要在安装一个浏览...

1907
来自专栏mukekeheart的iOS之旅

iOS学习——自动定位

  最近在项目中需要做自动定位功能,就是你在参加会议通过扫描二维码签到的时候自动定位并将你的定位信息在签到中上传,这样可以避免我们进行假签到。在这个功能中,主要...

40110
来自专栏周明礼的专栏

一步一步带你搭建一个“摩登”的前端开发环境

最近几年也陆续推出了多种不同的js类型系统用于增强js的健壮性,其中像 typescript 就是其中的佼佼者。当然我今天要讲的并不是typescript,而是...

1.4K0
来自专栏源哥的专栏

安全套接字(https)下无法下载附件的解决方案

最近在做一个项目,里面实现一个功能,就是点击按钮后,将一段文本输出为txt附件,供用户保持。 整个功能在普通http方式访问...

754
来自专栏IMWeb前端团队

AS3程序员小福利--as3js介绍及FlashDevelop工程的配置

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 ? 什么是AS3JS? AS3JS是ActionScript 3.0到Jav...

1976
来自专栏啸天"s blog

微信内置浏览器自动跳转其它浏览器

1593
来自专栏偏前端工程师的驿站

Eclipse魔法堂:修改主题

一、前言                                   习惯黑色主题,而Eclipse默认的白底主题显然不是我的菜,下面一起来修改主题吧!...

1736
来自专栏玄魂工作室

nw.js如何处理拖放操作

nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了。...

2695
来自专栏肖蕾的博客

第三章:中文绘制(一 傻逼版)Hiero工具BitmapFont绘制中文

1.LibGdx底层使用OpenGL ,可以支持中文。 2.中文汉字,都是以贴图的方式显示。 3.显示中文,需要读取包含中文汉字信息的 .fnt 后缀文件,...

862
来自专栏一个爱瞎折腾的程序猿

日常开发中的几个常用跨域处理方式

若要通过IP在局域网访问h5,启动开发服务器的时候添加host参数即可 即package.json的dev命令配置如下 "dev": "webpack-de...

582

扫码关注云+社区