首先申明，接下来内容只是单纯的预览图片，最多选择九张，并没有和后台交互，交互的话需要自己另外写js。

本来想写一个调用摄像头的demo，意外的发现input file 在手机端打开的话，ios可以调用图库或者摄像头,而安卓系统不能调用= =||。如果有人早知道，轻喷，我才发现。。。

我对于web这一块很感兴趣，希望能和大家一起交流，一起进步！

代码很简单，当我第一次发博客的纪念。。。

效果演示：

1.这是页面布局，基本没多少= =class随手起的，不要介意，懒。。。

 <body>

         <p>点击下面区域</p>

         <div class="adiv">

             <div class="ad1">

                 <input type="file" id="file" accept="image/*"/>

             </div>

             <div class="ad11">

             </div>

         </div>

     </body>

2.这里就是样式。。。

          <style type="text/css">

             .adiv{

                 position: relative;

                 border: 1px solid red;

                 width:200px;

                 height: 200px;

             }

             .adiv div{

                 position: absolute;

                 width:200px;

                 height: 200px;

                 left:;

                 top:;

             }

             #file{

                 opacity:;

             }

             .ad11{

                 z-index:;

                 background: red;

                 background-size: 100% 100%;

             }

             .ad2{

                 float: left;

                 width:200px;

                 height: 200px;

                 background: red;

             }

             .ad2 img{

                 width:100%;

                 height: 100%;

             }

         </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模拟摇一摇，判断系统或者微信。。。如果大神呲之以鼻，请直接无视。。。

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

致谢！！

input file 模拟预览图片。的更多相关文章

  1. input上传图片（file）,预览图片的两种方法。blob与base64编码

    上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...

  2. input file上传图片预览，非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  3. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  4. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  5. file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  6. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  7. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. A Tour of Go Multiple results

    A function can return any number of results. This function returns two strings. package main import ...

  2. mongodb的高级操作（聚合框架）

    group by 查询 不要用java驱动带的group by ,要用2.2版本后的aggregate聚合框架来搞,经过试验速度快一倍 参考 官网:http://docs.mongodb.org/ma ...

  3. mongodb的查询操作符

    本文地址:http://www.cnblogs.com/egger/archive/2013/05/04/3059374.html   欢迎转载 ,请保留此链接! 官方参考: http://docs. ...

  4. 取正在运行的DLL或EXE的路径

    function GetSelfPath: string;var  ModuleName: string;  i: Integer;begin  SetLength(ModuleName, 255); ...

  5. 为什么 var_dump("1" == "1e0"); 的结果为true

    今天,同学问我一个问题,如下:var_dump("1" == "1e0"); 的结果是什么. 我的第一反应,答案是false.因为很明显的要比较的是两个字符串, ...

  6. 安装J2EE的SDK报错：could not find the required version of the Java(TM)2 Runtime Environment in '(null)'的解决办法。

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. windows API 实现截图

    參考:http://bbs.csdn.net/topics/330154355 #include "stdio.h" #include "windows.h" ...

  8. Android开发环境搭建（windows OS）之补充

    这几天搭建了个安卓开发环境,也想玩玩安卓开发.在查询CSDN,CNBLOG,视频网站之后终于把开发环境搭建起来了,发现所有的指导都比较离散,比如有些只说安装方法,有些只说下载方法.本文来个集大成,算是 ...

  9. [Javascript] Drawing Paths - Lines and Rectangles

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  10. Android 系统状态栏一体化

    Android4.4新特性,系统状态栏一体化. 实现的步骤主要有以下几点: 1.android4.4 以上版本 2.设置app全屏: 方法:在AndroidManifest.xml中设置android ...