首先申明，接下来内容只是单纯的预览图片，最多选择九张，并没有和后台交互，交互的话需要自己另外写js。
本来想写一个调用摄像头的demo，意外的发现input file 在手机端打开的话，ios可以调用图库或者摄像头,而安卓系统不能调用= =||。如果有人早知道，轻喷，我才发现。。。
我对于web这一块很感兴趣，希望能和大家一起交流，一起进步！
代码很简单，当我第一次发博客的纪念。。。
效果演示：
1.这是页面布局，基本没多少= =class随手起的，不要介意，懒。。。
1 <body> 2 <p>点击下面区域</p> 3 <div class="adiv"> 4 <div class="ad1"> 5 <input type="file" id="file" accept="image/*"/> 6 </div> 7 <div class="ad11"> 8 </div> 9 </div> 10 </body>
2.这里就是样式。。。
1 <style type="text/css"> 2 .adiv{ 3 position: relative; 4 border: 1px solid red; 5 width:200px; 6 height: 200px; 7 } 8 .adiv div{ 9 position: absolute; 10 width:200px; 11 height: 200px; 12 left:0; 13 top:0; 14 } 15 #file{ 16 opacity: 0; 17 } 18 .ad11{ 19 z-index:1000; 20 background: red; 21 background-size: 100% 100%; 22 } 23 .ad2{ 24 float: left; 25 width:200px; 26 height: 200px; 27 background: red; 28 } 29 .ad2 img{ 30 width:100%; 31 height: 100%; 32 } 33 </style>
3.这里就是js。我在之前调用了jquery，这里各位如果打开的话记得自己内联文件。
$(function(){ /*点击外层div，触发被隐藏的input的点击事件*/ $(".ad11").click(function(){ if($(".ad2").length<9){ return $("#file").click(); }else{ return false; } }) /*当内容改变时能及时触发预览。*/ $("#file").change(function(){ readAsDataURL(); }) /*这是图片预览函数，最多上传九张，不带交互内容*/ function readAsDataURL(){ //检验是否为图像文件 var file = document.getElementById("file").files[0]; if(!/image/w+/.test(file.type)){ alert("请选择图片！"); return false; } var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload=function(e){ var result=document.createElement("div") result.className="ad2"; $("body").append(result) //显示文件 result.innerHTML='<img src="' + this.result +'" alt="" />'; if($(".ad2").length>=9){ $(".adiv").css("display","none"); } } } })
这些大概就是基本内容。我目前在就职，但对乱七八糟的东西很感兴趣。。。喜欢研究各种插件，小效果。比如input框内容实时监控，不同长度文字两端对齐，h5模拟摇一摇，判断系统或者微信。。。如果大神呲之以鼻，请直接无视。。。
如果哪有不足或者问题，欢迎指出，不胜感激。
致谢！！