一、上传图片、实现图片数据回显
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引用jQuery 使用CDN加速 -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<style>
width: 200px;
}
display: none;
}
</style>
<body>
<!--
使用 "multipart/form-data" 编码类型提交表单数据。这种编码类型允许在表单中包含文件上传字段。
-->
<form method="post" enctype="multipart/form-data">
<label>头像:</label><br />
<!-- 通过使用点击label来触发input的点击事件，来选择要上传的文件 -->
<label for="changeImg">
<img id="avatar" src="./imgs/upload.png">
</label>
<!-- 如需要上传多个文件要将name中的 "img" 改为 "img[]" 也就是加一个中括号; 代表我上传的可能是多个文件，用数组保存。 -->
<input type="file" id="changeImg" name="img"><br />
<!-- 提交按钮 -->
<input type="submit" value="上传">
</form>
</body>
<script>
$("#changeImg").change(function() {
file = $(this)[0].files[0];
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
var url = URL.createObjectURL(file);
$('#avatar').attr('src', url);
})
</script>
</html>
二、后台接收单张图片，并保存
<?php
if ($_POST) {
$dirPath = './imgs/';
$fileType = ['image/gif', 'image/pjpeg', 'image/jpeg', 'image/png'];
if (!is_dir($dirPath)) {
mkdir($dirPath, 0777, true);
}
if (!in_array($_FILES['img']['type'], $fileType)) {
echo "文件类型错误！";
exit;
}
if (!is_uploaded_file($_FILES['img']['tmp_name'])) {
echo "文件上传方式错误!";
exit;
}
echo $error;
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES['img']['tmp_name'];
$ext_name = explode('.', $_FILES['img']['name'])[1];
$nfname = date('YmdHis') . mt_rand(100, 999) . "." . $ext_name;
$fPath = $dirPath . $nfname;
move_uploaded_file($tmp_name, $fPath);
echo $fPath;
} else {
echo "文件上传失败";
exit;
}
}
三、接收单张图片
<?php
if($_POST['uploadpic'] == "上传"){
$dirPath = './images/';
$imgPathArr = [];
$fileType = ['image/gif','image/pjpeg','image/jpeg','image/png'];
if(!is_dir($dirPath)){
mkdir($dirPath,0777,true);
}
foreach($_FILES['imgs']['error'] as $key => $error){
if(!in_array($_FILES['imgs']['type'][$key],$fileType)){
echo "<script>alert('文件类型错误！')</script>";
exit;
}
if(!is_uploaded_file($_FILES['imgs']['tmp_name'][$key])){
echo "<script>alert('文件上传方式错误！')</script>";
exit;
}
if($error == UPLOAD_ERR_OK){
$tmp_name = $_FILES['imgs']['tmp_name'][$key];
$ext_name = explode('.',$_FILES['imgs']['name'][$key])[1];
$nfname = date('YmdHis').mt_rand(100,999).".".$ext_name;
$fPath = $dirPath.$nfname;
move_uploaded_file($tmp_name, $fPath);
$imgPathArr[] = $fPath;
}else{
echo "<script>alert('文件上传失败')</script>";
exit;
}
}
echo '<script>history.go(-1);</script>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多张图片上传</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" multiple name="imgs[]">
<input type="submit" name="uploadpic" value="上传">
</form>
</body>
</html>
