H5+plus mui 拍照、相册上传图片

最新推荐文章于 2023-06-13 23:47:45 发布

qq_41942913

最新推荐文章于 2023-06-13 23:47:45 发布

阅读量833

点赞数

本文链接：https://blog.csdn.net/qq_41942913/article/details/113592700

版权

本文介绍了如何在H5应用中结合Plus和Mui插件进行拍照和从相册选取图片的功能。首先，需要引入必要的CSS和JS文件，如mui.min.css、feedback.css和jQuery库。注意，H5+Plus的功能需要在真机环境中测试。通过使用mui.plusReady启动函数，可以轻松实现图片选择并进行上传。同时，提供了C#后台接收图片的处理程序链接。

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

在这里插入图片描述

在这里插入图片描述
需要引入mui.min.css、feedback.css、jquery-1.10.1.min.js、mui.min.js插件。
feedback.css插件下载：https://download.csdn.net/download/qq_41942913/15004990

Tips：H5+plus 是需要在真机调试的，否则不会调用成功。
（我直接用mui封装好的启动函数mui.plusReady）

html部分：

<html lang="en" class="feedback"><!--注意！！html标签内要添加lang="en" class="feedback"-->
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>问题反馈</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/feedback.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
			<h1 class="mui-title">故障图片</h1>
		</header>
		<div class="mui-content">
			<p>图片(选填,提供问题截图,总大小10M以下)</p>
			<div id='image-list' class="row image-list"></div>
			<button type="button" id="btnSubmit">提交</button>
		</div>
	</body>
</html>

js部分：

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/mui.js"></script>
<script>
	mui.init();
	mui('.mui-scroll-wrapper').scroll();
	var index = 1;
	var size = null;
	var imageIndexIdNum = 0;
	var starIndex = 0;
	var feedback = {
   
		imageList: document.getElementById('image-list')//图片的div
	};
	
	feedback.files = [];
	feedback.uploader = null;  
	mui.plusReady(function() {
   
		//启动plus的函数，要启动完才能调用相机等
	});
	
	/**
	 *提交成功之后，恢复表单项 
	 */
	feedback.clearForm = function() {
   
		feedback.imageList.innerHTML =