input file 模拟预览图片。

首先申明，接下来内容只是单纯的预览图片，最多选择九张，并没有和后台交互，交互的话需要自己另外写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模拟摇一摇，判断系统或者微信。。。如果大神呲之以鼻，请直接无视。。。

如果哪有不足或者问题，欢迎指出，不胜感激。

致谢！！

posted @ 2015-12-23 15:41  晨曦月  阅读(665)  评论(0)  编辑  收藏  举报