上传图片、图片回显、后台接收图片并保存

一、上传图片、实现图片数据回显

 <!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>
    /* 限制图片的大小 */
    #avatar{
        width: 200px;
    }
    /* 隐藏上传图片的按钮 */
    #changeImg {
        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];
 
        // 封装一个返回file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                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);
    }
 
    // 传过来的文件使用$_File接收
    /* array(5) { 
        ["name"]=> string(14) "甜甜 (2).jpg" 
        ["type"]=> string(10) "image/jpeg" 
        ["tmp_name"]=> string(22) "C:\Windows\php7DC6.tmp" 
        ["error"]=> int(0) ["size"]=> int(153160)
     } */
    // var_dump($_FILES['img']);
 
    // 判断文件类型
    // echo $_FILES['img']['type']; // image/jpeg
    if (!in_array($_FILES['img']['type'], $fileType)) {
        echo "文件类型错误！";
        exit;
    }
 
    // 判断文件是否是通过 HTTP POST 上传的
    if (!is_uploaded_file($_FILES['img']['tmp_name'])) {
        echo "文件上传方式错误!";
        exit;
    }
 
    // 判断上传过程中出现的其他错误，这里统统处理为错误
    echo $error;
    if ($error == UPLOAD_ERR_OK) {
        // 图片临时地址（暂存区）
        $tmp_name = $_FILES['img']['tmp_name'];
        // 获取图片后缀名
        // explode将字符串以 "." 作为分割符进行切割，用数组存储
        $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);
        }
        // var_dump($_FILES['imgs']);
        foreach($_FILES['imgs']['error'] as $key => $error){
            // 判断文件类型
            if(!in_array($_FILES['imgs']['type'][$key],$fileType)){
                echo "<script>alert('文件类型错误！')</script>";
                exit;
            }
            // 判断文件是否是通过 HTTP POST 上传的
            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>复制

上传图片、图片回显、后台接收图片并保存

一、上传图片、实现图片数据回显

二、后台接收单张图片，并保存

三、接收单张图片

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

JQuery中的load()、$

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>
	/* 限制图片的大小 */
	#avatar{
	width: 200px;
	}
	/* 隐藏上传图片的按钮 */
	#changeImg {
	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];

	// 封装一个返回file的url
	function getObjectURL(file) {
	var url = null;
	if (window.createObjectURL != undefined) { // basic
	url = window.createObjectURL(file);
	} else if (window.URL != undefined) { // mozilla(firefox)
	url = window.URL.createObjectURL(file);
	} else if (window.webkitURL != undefined) { // webkit or chrome
	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);
	}

	// 传过来的文件使用$_File接收
	/* array(5) {
	["name"]=> string(14) "甜甜 (2).jpg"
	["type"]=> string(10) "image/jpeg"
	["tmp_name"]=> string(22) "C:\Windows\php7DC6.tmp"
	["error"]=> int(0) ["size"]=> int(153160)
	} */
	// var_dump($_FILES['img']);

	// 判断文件类型
	// echo $_FILES['img']['type']; // image/jpeg
	if (!in_array($_FILES['img']['type'], $fileType)) {
	echo "文件类型错误！";
	exit;
	}

	// 判断文件是否是通过 HTTP POST 上传的
	if (!is_uploaded_file($_FILES['img']['tmp_name'])) {
	echo "文件上传方式错误!";
	exit;
	}

	// 判断上传过程中出现的其他错误，这里统统处理为错误
	echo $error;
	if ($error == UPLOAD_ERR_OK) {
	// 图片临时地址（暂存区）
	$tmp_name = $_FILES['img']['tmp_name'];
	// 获取图片后缀名
	// explode将字符串以 "." 作为分割符进行切割，用数组存储
	$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);
	}
	// var_dump($_FILES['imgs']);
	foreach($_FILES['imgs']['error'] as $key => $error){
	// 判断文件类型
	if(!in_array($_FILES['imgs']['type'][$key],$fileType)){
	echo "<script>alert('文件类型错误！')</script>";
	exit;
	}
	// 判断文件是否是通过 HTTP POST 上传的
	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>

上传图片、图片回显、后台接收图片并保存

一、上传图片、实现图片数据回显

二、后台接收单张图片，并保存

三、接收单张图片

微信扫一扫：分享