身份证附加文件上传示例展示
最编程
2024-02-06 19:47:14
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>图片生成</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
font-size: 12px;
font-family: Arial, Verdana;
color: #fff;
font-weight: 100;
cursor: default;
background: #FFFFFF;
min-width: 320px;
}
.id_img_wp {
width: 94%;
margin: 0 auto;
min-height: 30px;
}
.img_wp {
width: 40%;
margin: 0 5% 0 5%;
float: left;
cursor: pointer;
}
.img_wp img {
width: 100%;
height: 100%;
}
.img_intro {
color: #383838;
text-align: center;
font-family: "微软雅黑";
padding: 10px 0 10px 0;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div class="id_img_wp">
<input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/>
<input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/>
<div class="img_wp" onclick="zhengmian()">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589461294667&di=0409372fc25fff2f14d18ccac627bb2b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170630%2FGsVb-fyhskrp8296350.jpg"
id="zmz"/>
<p class="img_intro">身份证正面照</p>
</div>
<div class="img_wp" onclick="fanmian()">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589461294667&di=0409372fc25fff2f14d18ccac627bb2b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170630%2FGsVb-fyhskrp8296350.jpg"
id="fmz"/>
<p class="img_intro">身份证反面照</p>
</div>
</div>
</form>
<script>
$(function () {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
$(window).resize(function () {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
})
})
//正面
function zhengmian() {
$('#img_z').click();
}
function getzImg(imgFile) {
var file = imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);//将文件读取为Data URL小文件 这里的小文件通常是指图像与 html 等格式的文件
reader.onload = function (e) {
$("#zmz").attr("src", e.target.result);
}
}
//反面
function fanmian() {
$('#img_f').click();
}
function getfImg(imgFile) {
var file = imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$("#fmz").attr("src", e.target.result);
}
}
//申请
function checkForm() {
if ($('#img_z').val() == null || $('#img_z').val() == '') {
alert('请上传身份证正面照!');
return false;
}
if ($('#img_f').val() == null || $('#img_f').val() == '') {
alert('请上传身份证反面照!');
return false;
}
}
</script>
</body>
</html>
原文地址https://www.jianshu.com/p/3ae245229b78
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>图片生成</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
font-size: 12px;
font-family: Arial, Verdana;
color: #fff;
font-weight: 100;
cursor: default;
background: #FFFFFF;
min-width: 320px;
}
.id_img_wp {
width: 94%;
margin: 0 auto;
min-height: 30px;
}
.img_wp {
width: 40%;
margin: 0 5% 0 5%;
float: left;
cursor: pointer;
}
.img_wp img {
width: 100%;
height: 100%;
}
.img_intro {
color: #383838;
text-align: center;
font-family: "微软雅黑";
padding: 10px 0 10px 0;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div class="id_img_wp">
<input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/>
<input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/>
<div class="img_wp" onclick="zhengmian()">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589461294667&di=0409372fc25fff2f14d18ccac627bb2b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170630%2FGsVb-fyhskrp8296350.jpg"
id="zmz"/>
<p class="img_intro">身份证正面照</p>
</div>
<div class="img_wp" onclick="fanmian()">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589461294667&di=0409372fc25fff2f14d18ccac627bb2b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170630%2FGsVb-fyhskrp8296350.jpg"
id="fmz"/>
<p class="img_intro">身份证反面照</p>
</div>
</div>
</form>
<script>
$(function () {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
$(window).resize(function () {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
})
})
//正面
function zhengmian() {
$('#img_z').click();
}
function getzImg(imgFile) {
var file = imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);//将文件读取为Data URL小文件 这里的小文件通常是指图像与 html 等格式的文件
reader.onload = function (e) {
$("#zmz").attr("src", e.target.result);
}
}
//反面
function fanmian() {
$('#img_f').click();
}
function getfImg(imgFile) {
var file = imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$("#fmz").attr("src", e.target.result);
}
}
//申请
function checkForm() {
if ($('#img_z').val() == null || $('#img_z').val() == '') {
alert('请上传身份证正面照!');
return false;
}
if ($('#img_f').val() == null || $('#img_f').val() == '') {
alert('请上传身份证反面照!');
return false;
}
}
</script>
</body>
</html>
原文地址https://www.jianshu.com/p/3ae245229b78
推荐阅读
-
一种结构设计模式,允许在对象中动态添加新行为。它通过创建一个封装器来实现这一目的,即把对象放入一个装饰器类中,然后把这个装饰器类放入另一个装饰器类中,以此类推,形成一个封装器链。这样,我们就可以在不改变原始对象的情况下动态添加新行为或修改原始行为。 在 Java 中,实现装饰器设计模式的步骤如下: 定义一个接口或抽象类作为被装饰对象的基类。 公共接口 Component { void operation; } } 在本例中,我们定义了一个名为 Component 的接口,该接口包含一个名为 operation 的抽象方法,该方法定义了被装饰对象的基本行为。 定义一个实现基类方法的具体装饰对象。 公共类 ConcreteComponent 实现 Component { public class ConcreteComponent implements Component { @Override public void operation { System.out.println("ConcreteComponent is doing something...") ; } } 定义一个抽象装饰器类,该类继承于基类,并将装饰对象作为一个属性。 公共抽象类装饰器实现组件 { protected Component 组件 public Decorator(Component component) { this.component = component; } } @Override public void operation { component.operation; } } } 在这个示例中,我们定义了一个名为 Decorator 的抽象类,它继承了 Component 接口,并将被装饰对象作为一个属性。在操作方法中,我们调用了被装饰对象上的同名方法。 定义一个具体的装饰器类,继承自抽象装饰器类并实现增强逻辑。 公共类 ConcreteDecoratorA extends Decorator { public ConcreteDecoratorA(Component 组件) { super(component); } } public void operation { super.operation System.out.println("ConcreteDecoratorA 正在添加新行为......") ; } } 在本例中,我们定义了一个名为 ConcreteDecoratorA 的具体装饰器类,它继承自装饰器抽象类,并实现了操作方法的增强逻辑。在操作方法中,我们首先调用被装饰对象上的同名方法,然后添加新行为。 使用装饰器增强被装饰对象。 公共类 Main { public static void main(String args) { Component 组件 = new ConcreteComponent; component = new ConcreteDecoratorA(component); 组件操作 } } 在这个示例中,我们首先创建了一个被装饰对象 ConcreteComponent,然后通过 ConcreteDecoratorA 类创建了一个装饰器,并将被装饰对象作为参数传递。最后,调用装饰器的操作方法,实现对被装饰对象的增强。 使用场景 在 Java 中,装饰器模式被广泛使用,尤其是在 I/O 中。Java 中的 I/O 库使用装饰器模式实现了不同数据流之间的转换和增强。 让我们打开文件 a.txt,从中读取数据。InputStream 是一个抽象类,FileInputStream 是专门用于读取文件流的子类。BufferedInputStream 是一个支持缓存的数据读取类,可以提高数据读取的效率,具体代码如下: @Test public void testIO throws Exception { InputStream inputStream = new FileInputStream("C:/bbb/a.txt"); // 实现包装 inputStream = new BufferedInputStream(inputStream); byte bytes = new byte[1024]; int len; while((len = inputStream.read(bytes)) != -1){ System.out.println(new String(bytes, 0, len)); } } } } 其中 BufferedInputStream 对读取数据进行了增强。 这样看来,装饰器设计模式和代理模式似乎有点相似,接下来让我们讨论一下它们之间的区别。 第三,与代理模式的区别: 代理模式的目的是控制对对象的访问,它在对象外部提供一个代理对象来控制对原对象的访问。代理对象和原始对象通常实现相同的接口或继承相同的类,以确保两者可以相互替换。 装饰器模式的目的是动态增强对象的功能,而这是通过对象内部的包装器来实现的。在装饰器模式中,装饰器类和被装饰对象通常实现相同的接口或继承自相同的类,以确保两者可以相互替代。装饰器模式也被称为封装器模式。 在代理模式中,代理类附加了与原类无关的功能。
-
Vue + NodeJS 实现大文件上传的示例代码
-
元素 el-upload 文件上传/图像上传/拖放上传/附加参数/附加请求标头详情
-
使用Python Paramiko库轻松完成文件上传与下载操作的示例代码
-
身份证附加文件上传示例展示
-
在Java中实现多媒体文件上传和页面展示
-
码农必备的8大工具神器:在线图片压缩超好用!-网址:https://worldvectorlogo.com/ 网络异常,图片无法展示 | 在写文档、做行业调研、制作ppt时,经常遇到需要下载某个公司的logo文件问题,有的可以直接官网找到,有的却很难找到高清版本的logo图片。 这个网址收集了全球知名企业logo源文件,svg格式,可以免费下载不限次数,一直被我安利给身边的朋友们,网站界面操作也非常简单。 文档翻译神器-DeepL 网址:https://www.deepl.com/zh/translator 网络异常,图片无法展示 | 比某歌某道好用几倍的翻译软件,词汇和语法相对来说都用的更地道,机翻痕迹较少;而且支持整篇文档上传翻译,临时看英文文献的效率翻倍;最重要的是免费! 它支持26种语言之间的互译,而且译文基本都可以直接拿来使用。打开界面,可以看到它会自动检测语言,并且默认译文是中文,我们也可以根据自己需求来设置语言。然后,手动输入需要翻译的内容或者直接粘贴到文本框。最后,它会快速翻译,翻译结果支持一键复制到剪切板,方便后续使用。 在线小工具合集-蛙蛙工具 网址:https://www.iamwawa.cn/ 网络异常,图片无法展示 | “蛙蛙在线工具“是一个包含大量在线工具网站,包含语言工具,便民查询,转换工具,生理健康,站长工具等等的网站。 类似于个人所得税计算这样的工具,我只是偶尔用到 ,并不想单独存一个网站,这个工具就很好的帮我解决了这个问题,无需登录,在线使用,用完即走。