input file 模拟预览图片。
首先申明，接下来内容只是单纯的预览图片，最多选择九张，并没有和后台交互，交互的话需要自己另外写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 模拟预览图片。的更多相关文章
- input上传图片（file）,预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...
- input file上传图片预览，非插件
Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...
- 前端预览图片和H5canvas压缩图片上传
思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...
- input file样式修改，图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
随机推荐
- hdu 2102 A计划（优先队列+dfs）
改了好久,上午来实验室打出来了,运行就是不对,一直找啊找!还是没找到,最后突然停电了,打好的代码还没保存呢! 刚才来的时候又重新打了一遍!!!结果一个小小的错误wrong了好久!!! 在dfs值返回时 ...
- 正则匹配：Email 密码强度 身份证 手机号 日期 数字每4个字空一格等
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升.下面是在前端开发中经常 ...
- （二）如何在.net中使用Redis
Step1:使用NuGet工具安装Redis C# API,这里有多个API我们可以使用其中一个:
- JSLink to render the list to show people detail info with picture
I create a custom list, and create a poeple column to store poeple detail info with picture in this ...
- Objective-C中的占位符,打印BOOL类型数据
常用的一些占位符: %@:字符串占位符 %d:整型 %ld:长整型 %f:浮点型 %c:char类型 %%:%的占位符 尽管有那么多的占位符,但是好像没有发现BOOL型的数据的占位符,这也是比较纠结的 ...
- Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解
前言: 虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...
- 编译openjdk源码
http://www.cnblogs.com/ACFLOOD/p/5528035.html
- Java基础知识强化之IO流笔记43：IO流练习之 复制文本文件的 5 种方式案例
1. 案例分析: 分析: 复制数据,如果我们知道用记事本打开并能够读懂,就用字符流,否则用字节流. 通过该原理,我们知道我们应该采用字符流更方便一些. 而字符流有5种方式,所以做这个题目我们有5种方 ...
- iOS之定位与地图
概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...
- HDU-1060(简单数学)
Leftmost Digit Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...