自己做的小例子，凑合看吧
<style>
#title{
position: relative;
width: 90%;
color: #4c4a4b;
margin-left: 5%;
font-size: 16px;
margin-top: 5px;
font-weight:bold;
}
ul{
position: relative;
width: 90%;
margin-left: 5%;
height: 30px;
margin-top: 10px;
border-bottom: solid 1px #979797;
}
.warn{
height: 40px;
font-size: 14px;
text-align:left;
}
.edit{
position: relative;
width: 90%;
margin-left: 5%;
border-bottom: solid 1px #ededed;
height: 50px;
text-align:left;
}
.edit_project{
position: relative;
height: 50px;
line-height: 50px;
font-size: 15px;
float: left;
}
input,textarea{
position: relative;
width: 200px;
height: 50px;
font-size: 15px;
border: solid 0;
}
.shenfenzheng{
position: relative;
width: 90%;
margin-left: 5%;
border-bottom: solid 1px #ededed;
height: 250px;
text-align:left;
}
.image_border{
width:240px;
height:180px;
background-color:#ededed;
cursor: pointer;
overflow: hidden;
display: inline-block;
text-align:center;
vertical-align:middle;
clear:both;
}
.image_border img{
border: 0px;
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg_f">
<ul >
<p id='title'>添加清关证明</p>
</ul>
<ul class="warn">
<p><span style="color:red;">*注意：</span>上传该收货地址中收货人的身份证信息，身份证号必须与收货人姓名一致。</p>
</ul>
<form id="paySubmit" action="<%=basePath%>uploadIdCard/uploadIdCardInfo" method="post" enctype="multipart/form-data">
<input type="hidden" name="usrid" value="${usrid}"/>
<input type="hidden" name="address_id" value="${address_id }"/>
<ul class="edit">
<p class="edit_project">真实姓名：</p><input type="text" name="really_name" value="" />
</ul>
<ul class="edit">
<p class="edit_project">身份证号：</p><input type="text" name="id_card" value="" />
</ul>
<ul class="shenfenzheng">
<p class="edit_project"> 身份证件照（正面）</p>
<a class="image_border" id="paizhao">
<img id="img0" src="<%=basePath%>dist/images/pay/tuijian/upload_back.jpg" />
</a>
<input type="file" name="idCardImageFront" id="idCardImageFront" style='display:none;' />
</ul>
<ul class="shenfenzheng">
<p class="edit_project"> 身份证件照（反面）</p>
<a class="image_border" id="paizhao2">
<img id="img1" src="<%=basePath%>dist/images/pay/tuijian/upload_back.jpg" />
</a>
<input type="file" name="idCardImageBack" id="idCardImageBack" style='display:none;' />
</ul>
<input type="submit" value="上传" />
</form>
</body>
<script type="text/javascript">
$(function(){
var status = '${status}';
if(status == 'ok'){
alert("Thank you！ 上传成功！");
}else if(status =='error'){
alert("对不起，上传失败，请重新上传！");
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('#paizhao').click(function(){
$("#idCardImageFront").click();
});
$("#idCardImageFront").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
});
$('#paizhao2').click(function(){
$("#idCardImageBack").click();
});
$("#idCardImageBack").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$("#img1").attr("src", objUrl).show();
}
});
</script>
相关推荐
在现代Web应用中，大文件上传是一个常见的需求，特别是在数据密集型或媒体丰富的环境中。`Vue.js` 和 `SpringBoot` 是两个强大的技术框架，分别用于前端和后端开发。本教程将详细介绍如何利用这两者来实现高效的大...
- 对于多文件上传，可以多次调用`@Part MultipartBody.Part`，或者使用`@PartMap`注解映射多个文件。 以上就是使用Retrofit2.0进行单文件和多文件上传的基本步骤，以及客户端与服务器端的实现细节。在实际开发中，...
其次，Layui的文件上传组件提供了丰富的配置选项，如上传接口URL、文件类型限制、上传前的预处理、上传过程的进度显示以及错误处理等。开发者可以通过配置这些选项来定制符合需求的上传界面和行为。在实际应用中，...
springboot开发服务后台，提供文件上传接口，vue.js搭建前端项目，mint-ui做为UI界面，axios与后端服务接口交互，axios可实时监控文件上传进度，通过mint-ui实时展示当前文件上传进度
文件上传是Web应用程序中常见的功能，它允许用户将本地计算机上的文件发送到服务器进行存储、处理或分享。在这个场景中，我们关注的是“文件上传 (服务端+客户端)”，这通常涉及到一个完整的流程，包括客户端的文件...
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践，涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面，Java作为服务器端...
通过Ajax异步传输，用户可以在不刷新页面的情况下完成文件上传，提升用户体验。 首先，我们来了解一下这个系统的组成部分： 1. **前端界面**：通常使用HTML和jQuery构建。HTML表单用于选择文件，jQuery用于处理...
最后，根据文件上传是否成功，返回相应的视图（如`uploadSuccess.jsp`或`uploadError.jsp`），显示反馈信息给用户。 总结来说，JSP+Struts实现文件上传涉及以下步骤： 1. 在Struts配置文件中定义Action。 2. 创建...
本资源包含六种经典的ASP文件上传源码，且这些源码都支持文件上传进度条显示，提升了用户体验，让用户可以实时了解文件上传的进度。 1. 文件上传原理： ASP文件上传主要是通过HTML表单中的`<input type="file">`...
在本项目中，"javascript+HTML5 多文件上传（插件）多进度条显示"是一个实现这一功能的实例，它允许用户选择并上传多个文件，并在上传过程中实时显示每个文件及整体的上传进度。下面将详细介绍这个技术实现的关键...
在现代Web应用中，大文件上传是一个常见的需求，特别是在企业级项目中，用户可能需要上传大量的数据，如视频、图片库或大型文档。本项目"springboot+vue 大文件上传 包括断点续传 秒传 分片上传.zip"提供了一套完整...
在现代Web应用开发中，大文件上传是一个常见的需求，尤其对于多媒体内容的处理。本示例项目"springboot+vue前后端分离 实现超大文件分块上传"提供了一个高效且实用的解决方案，将Java后端框架Spring Boot与前端Vue....
在现代Web应用中，文件上传是一项常见的功能，而利用AJAX技术实现的异步文件上传不仅可以提高用户体验，还能实现文件上传进度的实时显示。本文将深入讲解如何使用AJAX、JavaScript、Java和Servlet来实现一个自定义的...
Flash作为一种客户端技术，能够提供实时的用户界面交互，包括在文件上传过程中显示进度条。在PHP与Flash的配合下，可以通过Flash发送每个文件块的上传进度到服务器，然后服务器通过PHP返回这些信息给客户端，更新...
文件上传在Spring MVC中主要通过`@RequestParam`注解实现。开发者可以创建一个Controller方法，接收`MultipartFile`对象，这个对象包含了上传文件的信息。在处理文件时，我们需要将文件保存到服务器的某个目录，并...
在这个"ssm多文件上传demo+mysql"项目中，主要涉及的是如何在SSM框架下实现多文件上传，并将文件信息存储到MySQL数据库中。 首先，我们需要理解SSM框架的工作原理。Spring作为基础框架，负责管理应用的bean和依赖...
本教程将深入探讨Spring MVC如何处理单文件上传、多文件上传、文件列表显示以及文件下载。以下是对这些知识点的详细说明： 1. **单文件上传**： 在Spring MVC中，单文件上传主要通过`@RequestParam("file") ...
本教程将详细讲解如何在uniapp中实现文件上传功能，特别是针对Android和iOS设备，以及如何处理不同类型的文件，如PDF、Word和TXT，并将它们转换为Base64编码。 首先，我们需要了解uniapp的基础。uniapp基于Vue.js，...
要实现文件上传进度条，我们需要使用到Layui的AjaxUpload组件，该组件可以用来上传文件并显示上传进度。我们可以使用`layui.upload`方法来上传文件，并使用`on`方法来监听上传进度。 例如： ```javascript layui....
在IT行业中，文件上传是一项常见的功能，特别是在网页应用和服务器交互的过程中。`layui`是一个流行的前端框架，提供了丰富的组件和优雅的UI设计。本资源"layui文件上传带进度条显示.zip"结合了`layui`与`PHP`，实现...