用html5 拍照+多图片上传、删除图片、查看图片

最新推荐文章于 2021-11-21 21:36:29 发布

jazhenglufang

最新推荐文章于 2021-11-21 21:36:29 发布

阅读量1.9k

点赞数 2

分类专栏：前端 html+css 文章标签： html mui

本文链接：https://blog.csdn.net/jazhenglufang/article/details/103347696

版权

本文介绍如何利用HTML5的file API实现手机拍照、多图片上传、删除及查看图片的功能。通过示例代码展示网页版多文件上传的实现方式。

摘要由CSDN通过智能技术生成

用html5中的 file 调用手机拍照以及多图片上传功能，可进行删除图片、放大查看图片，网页版多文件上传也可以用。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<title></title>
	</head>
	<style>
		.mui-table-view-cell:after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 0px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}
		
		.mui-table-views {
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		list-style: none;

		}
		.mui-contents {
		background-color: #FFFFFF;
		opacity:0.8;
		float:inherit;
		margin: 45px  auto 45px auto;
	    border: 1px solid #FFFFFF ;
	    width: 90%;
		}
		
	
		.mui-table-view-cell.mui-radio.mui-left {
		    padding-left: 5px;
		}
		
		
		/*上传图片样式 */