欢迎,感谢你能来...

找到回家的路:
首页 > 前端分享 > JS/JQuery > JavaScript上传图片本地实时预览缩略图
JS/JQuery

JavaScript上传图片本地实时预览缩略图

作者:Fanda 发布日期:2016-05-14 围观人数:383人

简介

通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器 css: .wrap{ width: 202px; margin: 80px auto; } #preview, . […]

通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器

css:

.wrap{
    width: 202px;
    margin: 80px auto;
}
#preview, .img, img{
    width:200px;
    height:200px;
}
#preview{
    border:1px solid #000;
}

html:

<div class="wrap">
    <div id="preview"></div>
    <input type="file" accept="image/*" onchange="preview(this)"/>
</div>

js:

function preview(file){
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]){
var reader = new FileReader();
       reader.onload = function(event){
           prevDiv.innerHTML = '<img src="' + event.target.result +'"/>';
       }
       reader.readAsDataURL(file.files[0]);
   }
else{
       prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
   }
}

(完)

Tags:

转载 云中不知处博客欢迎分享,转载请说明文章出处“ 来源云中不知处博客 http://www.saymiss.com/archives/134 “。
很赞哦!( 0)

上一篇:没有了,已经是最后文章

下一篇:

( 0 )个小伙伴在吐槽

访客评论


站点统计

  • 更新时间:2020-05-06 07:26
  • 文章总数:32
  • 评论总数:38
  • 标签总数:24
  • 运行时间: 511
我的微信
  • 网站赞助:阿里云、腾讯云、百度云、奇虎360、网易云音乐、音悦台、京东商城,哦以上这些都没有。
  • 网站制作:页面设计:Fanda;前端开发:Fanda;后台功能:Fanda;主题开发:Fanda;技术支持:Fanda。我就是天才...
免责声明
  • 1、本站个人博客模板,均为Fanda本人设计,可供个人学习和使用,未经许可不得用于任何商业目的。
  • 2、本站部分文章来自网络,请您放心,所有转载文章内容皆保留来源链接,如本站有著作权属于你的文章内容,而本站并未放上链接或有其他原因侵权,请E-mail: fzh2812@163.com,我会在48小时内删除相关内容,敬请谅解!
碎言碎语
  • 三生有幸遇见你,纵使悲凉也是情

    2020-05-07
  • 忍一时风平浪静,退一步越想越气

    2020-03-21
  • 最近996

    2019-11-09
  • 最近有点忙,996啊

    2019-07-29
  • 端午3天我就没下过楼,出过门

    2019-06-09
  • 今天不小心,谈成了一笔小生意

    2019-05-26
  • 今天为公司推荐一个java后台

    2019-05-24

©2019 云中不知处 Powered by WordPress 文章归档 免责声明 网站地图 百度统计