做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"