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上传图片并显示的更多相关文章

  1. Js实现input上传图片并显示缩略图

    用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img ...

  2. COS上传图片和显示图片

    写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...

  3. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

  4. 自定义input上传图片组件

    自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...

  5. input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...

  6. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. input上传图片 显示预览信息

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. springmvc上传图片并显示图片--支持多图片上传

    实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...

  9. springmvc上传图片并显示--支持多图片上传

    实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>comm ...

随机推荐

  1. HDU 1800——Flying to the Mars——————【字符串哈希】

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  2. Android的存储方式

    Android常见的四种存储方式: 1. SharePreference 2. File 3. ContentProvider 4. SQLite 第一种: 保存在应用程序私有的文件夹下---- 只有 ...

  3. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  4. C# 实现OrderBy按多个字段排序

    //倒序 list.OrderByDescending(i => i.a).ThenByDescending(i => i.b); //顺序 list.OrderBy(i => i. ...

  5. ECMAScript 6简介

    一.起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐上来就 ...

  6. JVM crash at ForUtil.readBlock

    今天同学让帮忙看下JVM错误日志,才发现已经开始接触java3个月,还没看到相关错误日志.平时看的都只是程序运行时写入的日志,关于JVM的错误日志还真没看过.网上收集资料,整理如下. 一.日志文件: ...

  7. Python中变量的本质探索

    Python中变量的本质探索 参考:Vamei博客Python进阶09 动态类型 ''' a = [1,2,3] ''' (1)这条"赋值语句"实际上是将a指向对象"[1 ...

  8. 树莓派3(Raspberry pi 3)刷OpenWrt

    原文在 https://my.oschina.net/wangandi/blog/687389 1.下载镜像,这个lede好像是openwrt的一个分支,openwrt本身还没有支持pi3,https ...

  9. requireJS的优化工具 ---- r.js

    requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...

  10. tr标签是什么

    <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素.