PHP复习4：表单传输，图片移动和预览

SXxx_

于 2021-12-28 23:51:09 发布

阅读量269

点赞数

文章标签： php 前端开发语言

本文链接：https://blog.csdn.net/SXxx_/article/details/122203351

版权

一、用户登录

1、简单的用户登录页面
通过form表单将用户名（username）和密码（password）传输到loginAction页面进行判断

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>用户登录</title>
    </head>
    <body>
        <form action="loginAction.php" method="post">
            <p>用户登录界面</p>
            <p>账号：<input type="text" name="username" id="" value="" size="10" maxlength="10" PLACEHOLDER="请输入账号"/></p>
            <p>密码：<input type="password" name="password" id="" value="" maxlength="16" size="10" PLACEHOLDER="请输入密码"/></p>
            <input type="submit" name="" id="" value="登录" />
        </form>
    </body>
</html>

页面效果：
在这里插入图片描述
2、验证页面后端代码
利用$_POST接收前端页面的账号（username）和密码（password）

<?php
$username = $_POST['username'];
$password = $_POST['password'];

if ($username == 'admin' && $password == '123456'){
    echo '登入成功！';
}else{
    echo '用户名或密码错误';
}

整体运行效果：
在这里插入图片描述

二、图片传输

1、简单的不能再简单的文件上传页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>个人中心</title>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <p>个人中心</p>
            <p>上传产品图：<input type="file" name="file" multiple></p>
            <input type="submit" name="" id="" value="提交" />
        </form>
    </body>
</html>

页面效果：
在这里插入图片描述

2、后端文件传输代码
$_FILES[‘前端代码中的name’][‘name’]：客户端文件的原名称。
$_FILES[‘前端代码中的name’][‘tmp_name’]：文件被上传后在服务端储存的临时文件名。

<?php
//文件原名称
$old_file_name = $_FILES['file']['name'];
echo $old_file_name.'<br/>';

//在服务端储存的临时文件名
$temp_path = $_FILES['file']['tmp_name'];
echo $temp_path.'<br/>';

//用原名称加上传时间加密，存入新名称
$new_name = md5($old_file_name.time());
echo $new_name.'<br/>';

//将原文件名分割为数组
$arr = explode('.',$old_file_name);
echo '<br>';

//进行文件移动,end()截取数组结尾值的文件扩展名
move_uploaded_file($temp_path,'img/'.$new_name.'.'.end($arr));
echo '上传成功！';

运行结果：
在这里插入图片描述

在这里插入图片描述

三、选择图片并上传后都进行预览

1、前端代码
利用js实现图片预览

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>个人中心</title>
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <p>个人中心</p>
            <!--        	onchage：当文件发生改变时执行方法				-->
            <p>上传产品图：<input type="file" name="file" id="file" multiple onchange="SHOW();"></p>
            <img src="" id="imgid">
            <input type="submit" name="" id="" value="提交" />
        </form>
    </body>
    <script>
        function SHOW(){
            var fileObj = document.getElementById('file');
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(fileObj.files[0]);
            document.getElementById('imgid').src =imgURL;
        }
    </script>
</html>

选中图片后的运行效果图：
在这里插入图片描述
2、后端代码，可支持多图片传输（html和php嵌套式代码）
ps：一定要注意不能给电脑账户取中文名，不然文件临时路径（$_FILES[‘file’][‘tmp_name’]）里面会出现中文导致报错，到现在没解决，有大佬知道怎么办的话希望可以教教T_T

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>头像上传成功</title>
    </head>
    <body>
    <?php
    $old_name = $_FILES['file']['name'];
    $move_path = '';
    $show_name = '';
    
    if (is_array($old_name)){
    //利用foreach循环进行图片移动
        foreach ($old_name as $key=>$item){
            $temp_name = $_FILES['file']['tmp_name'][$key];
            $new_name = md5($old_name.time());
            $arr = explode('.',$old_name);
            $move_path = 'img/'.$new_name.'.'.end($arr);
            $show_name = $new_name.'.'.end($arr);
            move_uploaded_file($temp_name,$move_path);
        }
    }else{
        $temp_name = $_FILES['file']['tmp_name'];
        $new_name = md5($old_name.time());
        $arr = explode('.',$old_name);
        $move_path = 'img/'.$new_name.'.'.end($arr);
        $show_name = $new_name.'.'.end($arr);
        move_uploaded_file($temp_name,$move_path);
    }
    
    ?>
    你上传的图片：
    <img src="img/<?echo $show_name?>" />
    </body>
</html>

提交效果：
在这里插入图片描述

另：要实现多图传输的话需将前端代码input标签中type为file的那一行的name改成数组形式，将图片以数组进行传输

如下图

<!--这行-->
<p>上传产品图：<input type="file" name="file" id="file" multiple onchange="SHOW();"></p>
<!--改成这样-->
<p>上传产品图：<input type="file" name="file[]" id="file" multiple onchange="SHOW();"></p>

SXxx_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
PHP复习4：表单传输，图片移动和预览

一、用户登录1、简单的用户登录页面通过form表单将用户名（username）和密码（password）传输到loginAction页面进行判断<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>用户登录</title> </head> <body> <for
复制链接

扫一扫