一、用户登录
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>