HTML5手机身份证上传表单提交代码.zip资源-CSDN文库

共8个文件

js：2个

css：2个

gif：1个

版权申诉

javascript

jQuery

html5

149 浏览量 2022-11-18 22:13:59 上传评论收藏 224KB ZIP 举报

HTML5在移动设备上的应用越来越广泛，特别是在网页表单提交和文件上传方面，它提供了许多增强功能，使得用户在手机上进行身份证等敏感信息的上传变得更加便捷和安全。本压缩包"HTML5手机身份证上传表单提交代码"包含了实现这一功能的示例代码，主要涉及前端技术，包括CSS、JavaScript、jQuery以及核心的HTML5特性。 HTML5引入了`<input type="file">`的新属性，如`accept`和`capture`，允许开发者指定用户可以选取的文件类型，如图片格式（如JPEG、PNG）或者PDF文档，这在身份证上传中非常实用。`accept`属性可以限制用户只选择图像文件，确保上传的是身份证照片。例如： ```html <input type="file" id="idUpload" accept="image/*"> ``` `capture`属性则可以控制用户直接从相机而非相册中拍摄照片，适用于需要实时上传身份证照片的情况： ```html <input type="file" id="idUpload" accept="image/*" capture="camera"> ``` HTML5的FormData接口是表单数据提交的关键。它允许我们动态地构建和发送HTTP请求，包括文件。在JavaScript中，我们可以创建一个FormData对象，然后将表单字段或文件添加到其中： ```javascript var formData = new FormData(); formData.append('idPhoto', document.getElementById('idUpload').files[0]); ``` 接着，利用XMLHttpRequest的`send()`方法，可以将FormData对象发送到服务器。通过设置`Content-Type`为`multipart/form-data`，我们可以上传文件： ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload-url', true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(formData); ``` 在这个过程中，jQuery库可以简化DOM操作和Ajax请求，使代码更加简洁。例如，使用jQuery的`$.ajax()`方法： ```javascript $.ajax({ url: '/upload-url', type: 'POST', data: formData, contentType: false, processData: false, success: function(response) { // 处理成功响应 }, error: function(xhr, status, error) { // 处理错误 } }); ``` 此外，为了提供更好的用户体验，CSS可以用来美化上传按钮和反馈信息。例如，使用CSS3来创建自定义的上传按钮样式，或者显示上传进度： ```css input[type="file"] { display: none; /* 隐藏原生文件输入框 */ } .custom-upload-button { /* 自定义样式 */ } .progress-bar { width: 0%; /* 进度条样式 */ } ``` 考虑到敏感的身份证信息，安全措施必不可少。前端应限制上传大小、格式，后端则需验证文件内容，防止恶意攻击。同时，传输过程应使用HTTPS协议确保数据加密，保护用户隐私。这个压缩包提供的HTML5手机身份证上传表单提交代码示例，演示了如何结合HTML5、CSS、JavaScript和jQuery来实现安全、高效的文件上传功能，适用于移动端的身份验证场景。开发者可以根据自己的需求进行调整和优化，以满足不同项目的需求。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5手机身份证上传表单提交代码.zip （8个子文件）

HTML5手机身份证上传表单提交代码

jiaoben4351

css

publi.css 2KB

style.css 5KB

img

wsload.gif 532B

acc_img.png 144KB

index.html 5KB

jquery1.8.3.min.js 91KB

script.js 161B

HTML5手机身份证上传表单提交代码.jpg 61KB

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5手机身份证上传表单提交代码 - 网页模板</title> <link href="css/publi.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body>  <section id="loading"></section>   <header class="acc_head"> <div class="clearfix"> <h1 class="tc">账户迁移申请</h1> <a href="#" class="out_icon">退出</a> </div> </header> <section class="acc_apply"> <ul> <li class="clearfix"> <label class="tl">迁移到手机号：</label> <input autocomplete="off" placeholder="请输入迁移到的手机号码" class="" type="text" /> </li> <li class="clearfix"> <label class="tl acc_five">身份证姓名：</label> <input autocomplete="off" placeholder="请输入姓名" class="" type="text" /> </li> <li class="clearfix"> <label class="tl acc_five">身份证号码：</label> <input autocomplete="off" placeholder="请输入身份证号码" class="" type="text" /> </li> <li class="clearfix" > <label class="tl acc_four fl">证件照片：</label> </li> <li style="border-top: 0; margin-bottom: 60px;"> <div class="acc_img"> <p class="tc">参考样例</p> <div id="sss"> <img class="acc_imgin" src="img/acc_img.png" id="img0"> </div> <div class="acc_sc"> <a href="javascript:;" class="tc acc_scicon">选择图片</a> <input type="file" name="file0" id="file0" multiple class="ph08" /> </div> <p class="ph09 ">注：身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，建议未化妆。手持证件人的五官清晰可见。照片内容真实有效。不得做任何修改。支持jpg、jpeg、bmp、gif格式照片。大小不超过5M</p> </div> </li> </ul> </section> <footer class="acc_foot clearfix"> <a href="#" class="fl tc acc_cancel">取消</a> <a href="#" class="fl tc acc_sure">提交</a> </footer>  <article id="tip"> <div class="pack"> <h1 class="tc">提交成功</h1> <p class="tc"></p> <a href="#">确定</a> </div> </article>  <script src="js/jquery1.8.3.min.js"></script> <script src="js/script.js"></script> <script type="text/javascript"> $(function() { /*document.documentElement.style.fontSize=document.documentElement.clientWidth*12/320+'px';*/ $(window).on("load", function() { $("#loading").fadeOut(); }) // ========================================浮层控制 $("#tip .pack a").on("click", function() { $("#tip").fadeOut() $("#tip .pack p").html("") return false; }) function alerths(str) { $("#tip").fadeIn() $("#tip .pack p").html(str) return false; } $(".acc_sure").on("click", function() { alerths("请等待审核！") return false; }) $("#file0").change(function() { if (this.files && this.files[0]) { var objUrl = getObjectURL(this.files[0]); console.log("objUrl = " + objUrl); if (objUrl) { $("#img0").attr("src", objUrl); $("#file0").click(function(e) { $("#img0").attr("src", objUrl); }); } else { //IE下，使用滤镜 this.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("sss"); //图片异常的捕捉，防止用户修改后缀来伪造图片 try { preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data; } catch (e) { this._error("filter error"); return; } this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")"; } } }); //建立一個可存取到該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; } }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。</p><br> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉