H5页面上传图片控件

最新推荐文章于 2024-05-28 13:09:47 发布

this_ITBoy

最新推荐文章于 2024-05-28 13:09:47 发布

阅读量1.2w

点赞数 6

分类专栏：原创文章标签： H5 上传图片控件

本文链接：https://blog.csdn.net/this_ITBoy/article/details/52130848

版权

本文介绍了在H5项目中实现图片上传功能的一种方法，通过提供的HTML和JS代码展示了如何创建一个图片上传控件。

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

做H5项目的时候应该经常会遇到上传图片的问题的，在这里介绍一种目前项目里面用到的一个H5页面上传图片的控件，代码如下：

html代码：

<!doctype html>
<#include "/ftl/common/base.ftl">
<html>
<head>
<meta charset="utf-8">
<title>::去家玩::</title>
<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
<meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<link rel="stylesheet" type="text/css" href="${URLPrefix.statics}/css/reset.css" />
<link rel="stylesheet" type="text/css" href="${URLPrefix.statics}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${URLPrefix.statics}/css/oldPopBox.css" />
<link rel="stylesheet" type="text/css" href="${URLPrefix.statics}/css/showPhoto.css" />
<script type='text/javascript' src="${URLPrefix.statics}/js/jquery.js"></script>
<script type='text/javascript' src="${URLPrefix.statics}/js/browser.js"></script>
<script type='text/javascript' src="${URLPrefix.statics}/js/imgCompressUpload.js"></script>
</head>

<body id="bodyBox">
	
	<!--@header-->
    <header class="header">
        <h2>秀萌照</h2>
	    <a class="back" href="${URLPrefix.statics}/toGrowIndex.do?childId=${(childId?c)!''}"  rel="nofollow"><em class="icon30" data-icon=""></em></a>
    </header>
	<!--}}header-->


	<div class="popShowPhoto">
		<em class="icon icon-close icon30" data-icon=""></em>
        <img src="../../images/liuzhukuaile.png" alt="">
        <div class="growthNav tEqual tEqual_nobor">
        		<div class="tEtd">
					<a class="onclickShow" οnclick="return $(this).next().click();" class="upLoadImg" id="cameraStart"><em class="icon icon-zhaoxiangji" data-icon=""></em><span class="blk">拍照</span></a><input type="file" id="choose" style="display:none" accept="image/*" multiple>
				</div>	       	
				<div class="tEtd">
					<a class="onclickShow" οnclick="return $(this).next().click();" class="upLoadImg" id="albumStart"><em class="icon icon-xiangce" data-icon=""></em><span class="blk">相册</span></a><input type="file" id="choose" style="display:none" accept="image/*" multiple>
				</div>	
				<div class="tEtd">
					<a class="onclickShow"><em class="icon icon-wenzi" data-icon=""></em><span class="blk">文字</span></a>
				</div>					
			</div>
	</div>
	

     <!--@main-->
    <div id="main" class="main main_t">
                
			<form action="#" method="post" id="showFm" >
            <section class="Hbox auto">
        		<div class="measureH">
                    <div class="layout nopad">	
                        <ul class="logFm taH">
                            <li class="hm nobor">
                                <textarea class="textarea" cols=""  name="comment" id="comment"