input上传图片并显示
html:
<div id="click">
<img>
</div><!--照片预览的div -->
<div class="choice_pic" id="choice_pic"><input type="file" name="" id="choice_p" onchange="previewFile()"></div>
<!--input设置为file的类型,透明度设置为0,id为choice_pic的div模拟选择图片的按钮 -->
js(原生)
<script type="text/javascript">
document.getElementById('choice_p').addEventListener('change',function(e){
var files = this.files;
var img = new Image();
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
var mb = (e.total/1024)/1024;
if(mb>= 2){
alert('文件大小大于2M');
return;
}
img.src = this.result;
img.style.width = "80%";
document.getElementById('click').style.width="180px";
document.getElementById('click').style.height="180px";
document.getElementById('click').innerHTML = '';
document.getElementById('click').appendChild(img);
}
});
</script>
input上传图片并显示的更多相关文章
- Js实现input上传图片并显示缩略图
用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img ...
- COS上传图片和显示图片
写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
- 自定义input上传图片组件
自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- input上传图片 显示预览信息
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- springmvc上传图片并显示图片--支持多图片上传
实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...
- springmvc上传图片并显示--支持多图片上传
实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...
随机推荐
- Javascript “等于”
JavaScript支持“=”.“==”和“===”运算符. 我们应当理解这些(赋值.相等.恒等)运算符之间的区别,并在编码过程中小心使用. == equality 等同,用于一般比较,在比较的时候可 ...
- /Date(1410019200000+0800)/如何转换为date对象
<script type="text/javascript">var s = '/Date(1410019200000+0800)/ '; s.replace(/Dat ...
- artDialog组件应用学习(三)
一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...
- 使用vue-router切换页面时,获取上一页url以及当前页面url
今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我 ...
- 可编辑DIV 光标位置 处理
//场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就 ...
- Swiper双向轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- envi利用矢量数据对影像做多边形裁剪 (转)
2011-05-25 17:31:10| 分类: ENVI|举报|字号 订阅 来自:http://zhangling357522.blog.163.com/blog/static/184687296 ...
- 【PIC单片机】Pic单片机基础知识
本次学习采用PIC16F877A芯片及HJ-5G 开发板 一.IO口操作 1.1 设置I/O口方向:input or output TRISx 方向寄存器 (Transport and Receive ...
- 关于Cookie 的HttpOnly属性(java/web操作cookie+Tomcat操作jsessionid)
关于Cookie的其它只是不在累述.本文主要讲讲自己在项目中遇到的cookie的HttpOnly属性问题 Cookie的HttpOnly属性说明 cookie的两个新的属性secure和Httponl ...
- C# 轻松读取、改变文件的创建、修改、访问时间 z
// 读取文件的创建.修改.访问时间FileInfo fi = new FileInfo("C://test.txt");Console.WriteLine(fi.Creation ...