html5手机页面选择相册图片上传表单提交

共8个文件

css：2个

js：2个

png：1个

html5

选择相册

图片上传

表单提交

1星需积分: 50 160 浏览量 2018-05-18 17:04:12 上传评论 1 收藏 183KB ZIP 举报

HTML5在移动设备上的应用为用户提供了更丰富的交互体验，特别是在图片上传方面。"html5手机页面选择相册图片上传表单提交"是移动Web开发中的一个重要功能，它允许用户直接从手机相册中选取图片并提交到服务器，极大地简化了用户操作流程。一、HTML5的新特性：File API HTML5引入了File API，这是一个用于处理文件的JavaScript接口。它允许开发者在不离开浏览器的情况下读取、处理和上传文件。File API包括FileReader、FileWriter和FileList等对象，它们使得图片上传功能得以实现。 1. FileReader：用于读取文件内容，支持读取为文本、二进制字符串或DataURL（Base64编码的图像数据）。 2. FileList：表示一组File对象，常用于表单的文件输入元素中，例如`<input type="file">`。 3. Blob：代表二进制大对象，用于存储非结构化的数据，如图像、音频或视频。二、HTML5表单控件：`<input type="file">` 在HTML5中，`<input type="file">`控件得到了增强，特别是添加了`accept`属性，可以限制用户可以选择的文件类型，例如只允许选择图像文件： ```html <input type="file" accept="image/*"> ``` 此外，`multiple`属性允许用户同时选择多个文件： ```html <input type="file" accept="image/*" multiple> ``` 三、图片预览功能在用户选择文件后，通常会希望在提交前先预览图片。可以使用FileReader的`readAsDataURL`方法读取文件内容并将其转换为DataURL，然后设置为`<img>`元素的`src`属性： ```javascript function handleFileSelect(event) { const files = event.target.files; for (let i = 0; i < files.length; i++) { const file = files[i]; const reader = new FileReader(); reader.onload = (e) => { const img = document.createElement('img'); img.src = e.target.result; // 将预览图添加到页面 document.body.appendChild(img); }; reader.readAsDataURL(file); } } document.getElementById('fileInput').addEventListener('change', handleFileSelect, false); ``` 四、图片上传 1. 传统方式：使用`FormData`对象将图片数据与表单数据一起发送到服务器。创建一个`FormData`实例，将File对象添加到其中，然后使用`fetch`或`XMLHttpRequest`发送请求。 ```javascript const formData = new FormData(); formData.append('image', selectedFile); fetch('/upload', { method: 'POST', body: formData }).then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 2. 使用Web Workers进行异步上传：当处理大量图片时，Web Workers可以在后台线程中运行，避免阻塞主线程。五、安全与权限由于涉及到用户的隐私数据，HTML5的文件上传功能也需遵循一定的安全策略。例如，只能访问用户选择的文件，不能访问整个文件系统。此外，现代浏览器还会提示用户确认是否允许网页访问相册。总结，"html5手机页面选择相册图片上传表单提交"涉及HTML5的新特性，如File API、`<input type="file">`控件以及图片预览和上传机制。通过这些技术，开发者可以构建出更友好的移动端图片上传功能，同时需要注意安全和权限问题。

资源推荐

资源详情

资源评论

收起资源包目录

html5手机页面选择相册图片上传表单提交.zip （8个子文件）

css

publi.css 2KB

style.css 5KB

img

wsload.gif 532B

acc_img.png 144KB

favicon.jpg 2KB

index.html 5KB

jquery1.8.3.min.js 91KB

script.js 161B

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1 maximum-scale=2, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Add to Home"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none"> <title>首汽约车—账户迁移申请</title> <meta name="keywords" content="首汽约车—账户迁移申请"> <meta name="description" content="首汽约车—账户迁移申请"> <meta name="Copyright" content="首汽约车—账户迁移申请"> <meta name="author" content="首汽约车—账户迁移申请">  <link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"> <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> </body> </html>

评论收藏

内容反馈