html+Jquery实现手机端上传图片

最新推荐文章于 2021-05-31 08:28:25 发布

过客璇璇

最新推荐文章于 2021-05-31 08:28:25 发布

阅读量2.4k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_36706878/article/details/103548427

版权

本文详细介绍了一个HTML表单的设计，特别聚焦于图片上传功能的实现。通过使用JQuery进行事件绑定，实现了点击上传图片，并预览图片效果，同时限制上传数量。代码中包括了错误处理和图片预览的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.编写html表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" type="text/css" href="css/main.css" />

<script src="js/jquery.min.js"></script>
<script src="js/m.js"></script>
<style>
	.inner{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
	.problem{
		width:100%;
	}
	
</style>

</head>
<body style="height: 100vh;background-color: #EEF5FD;">

<div class="inner">

	<div class="problem">
		<div class="custom_img">
			<div class="custom_img_top">
				<p>图片说明</p>
				<p><span class="upload_img_length">0</span>/3</p>
			</div>
			
			<!--点击上传图片 触发下面的div 点击事件-->
			<div class="upload_img_wrap">
				<div id="imgBox"

最低0.47元/天解锁文章