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 ...
随机推荐
- [Verilog] parameter
parameter和localparam的作用范围均为本模块,区别在于前者可用于在实例化模块的时候进行参数的传递. 用已定义的参数对变量赋值时,按照补码的方式处理,若出现溢出的情况,则截取低位.
- sp 数据拼接html table表转换xml,发邮件
USE [BES_ADV] GO /****** Object: StoredProcedure [dbo].[RSP_FN_UNAPPLIED_Mail_Reminder] Script Date: ...
- win10x系统下的Git下载安装
git安装和使用百度一下就有,官方地址https://git-scm.com/book/zh/v1/起步-安装-Git 但是说的并不是很详细,自己记录一下, 首先我们去官网下载一个git 有两个下载地 ...
- 对json缓存进行操作
var data={ id:1, name:"张三" } //存储缓存 var arrdata=[]; arrdata.push({id:data.id,name:data.nam ...
- Android 隐式 Intent 跳转注意事项
前几天正好看到<阿里巴巴 Android 开发手册>中提到的: “Activity 间通过隐式 Intent 的跳转,在发出 Intent 之前必须通过 resolveActivity 检 ...
- 如何设置树莓派的VNC开机时启动
转载:http://www.linuxidc.com/Linux/2016-12/138793.htm 下面正式开始配置 首先 sudo nano /etc/init.d/vncserver 然后 复 ...
- bit_count
bit_count函数的含义 用来计算二进制数中包含1的个数. select BIT_COUNT(10); 因为10转成二进制是1010,所以该结果就是2. bit_or函数的含义 就是对两个二进制数 ...
- GridView——标题行自适应单元格列宽与选中单元格变色
首先看效果图: 主要实现—— 1.前台GridView代码: <asp:GridView Height="100%" Width="98%" ID=&qu ...
- SpringMvc-helloword
说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...
- 关于git的认识与想法
1.什么是git: Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git的读音为/gɪt/. Git是一个 ...