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. Javascript “等于”

    JavaScript支持“=”.“==”和“===”运算符. 我们应当理解这些(赋值.相等.恒等)运算符之间的区别,并在编码过程中小心使用. == equality 等同,用于一般比较,在比较的时候可 ...

  2. /Date(1410019200000+0800)/如何转换为date对象

    <script type="text/javascript">var s = '/Date(1410019200000+0800)/ '; s.replace(/Dat ...

  3. artDialog组件应用学习(三)

    一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...

  4. 使用vue-router切换页面时,获取上一页url以及当前页面url

    今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我 ...

  5. 可编辑DIV 光标位置 处理

    //场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就 ...

  6. Swiper双向轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. envi利用矢量数据对影像做多边形裁剪 (转)

    2011-05-25 17:31:10|  分类: ENVI|举报|字号 订阅 来自:http://zhangling357522.blog.163.com/blog/static/184687296 ...

  8. 【PIC单片机】Pic单片机基础知识

    本次学习采用PIC16F877A芯片及HJ-5G 开发板 一.IO口操作 1.1 设置I/O口方向:input or output TRISx 方向寄存器 (Transport and Receive ...

  9. 关于Cookie 的HttpOnly属性(java/web操作cookie+Tomcat操作jsessionid)

    关于Cookie的其它只是不在累述.本文主要讲讲自己在项目中遇到的cookie的HttpOnly属性问题 Cookie的HttpOnly属性说明 cookie的两个新的属性secure和Httponl ...

  10. C# 轻松读取、改变文件的创建、修改、访问时间 z

    // 读取文件的创建.修改.访问时间FileInfo fi = new FileInfo("C://test.txt");Console.WriteLine(fi.Creation ...