<html>
<body>
<fieldset>
<legend>测试</legend>
<div class="form-group">
<div class="img-preview rl">
<form id="index_form1" name="index_form1" role="form" method="post" enctype="multipart/form-data" style="float: left;">

<div class="mui-col-xs-4 img-upload mui-text-center iconfont icon-shangchuantupian rl mui-pull-left" id="picone" style="background-image: url(imgs/andd.png);background-size:cover ;">
<span style="font-size: 15px; padding-left: 20px; position: absolute; float: left; margin-top: 104px;">测试</span>
<input type="file" class="wid-100 ab file" id="uploadpic1" name="uploadpic1"  capture="camera"   accept="image/*"  οnchange='doChange(this)'; />

<div class="mui-clearfix"></div>
</div>

</form>

</div>
</div>
</fieldset>

<img id="img1" src="a.jpg" style="width:200px;height:200px"/>
</body>
</html>

<script>
if (typeof FileReader == 'undefined') {
alert("抱歉,你的浏览器不支持FileReader");
}
function doChange(obj)
{
html5ImgLocalReader('uploadpic1', 'img1');
}
function html5ImgLocalReader(fileId, imgId) {
var file1 = document.getElementById(fileId);
var file = file1.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
document.getElementById(imgId).src=this.result;
//document.getElementById(imgId).style.backgroundImage = "url(" this.result ")";
}
}
</script>

  

From:http://www.cnblogs.com/xuejianxiyang/p/6845162.html

html5 图片上传 预览相关推荐

  1. js实现图片上传预览及进度条

    js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...

  2. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  3. html 手机qq图片预览,模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  4. Angular6自定义指令实现多图片上传预览

    在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...

  5. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  6. JAVA实现一个图片上传预览功能

    这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^

  7. java 图片上传 预览 demo_图片上传预览

    [实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...

  8. JavaScript 图片上传预览效果

    图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...

  9. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

最新文章

  1. bzoj 1441: Min 裴蜀定理
  2. jsp页面传递参数是如何与javabean进行关联的
  3. 【书评】RHCSA/RHCE Red Hat Linux 认证学习指南(第6版)EX200 EX300
  4. Linux下二进制包、源代码包、rpm.binary与rpm.source
  5. HALCON示例程序classify_image_class_svm.hdev使用SVM分类器对多通道图像进行分类
  6. 前端学习(2995):vue+element今日头条管理--代码测试规范
  7. cannot convert value of type ‘org.codehaus.xfire.spring.editors.ServiceFactoryEditor
  8. 查找-------(HashCode)哈希表的原理
  9. Objective-C(9)内存管理之ARC
  10. excel方格子插件_转载 | 18个Word/Excel/PPT插件整理
  11. vue从创建到完整的饿了么(7)点击事件与页面跳转
  12. Qt warning : 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失
  13. 10 个开源压力测试工具
  14. Arduino Nano技术指标
  15. MATLA 复制文件到指定文件夹
  16. ffmpeg给视频加水印
  17. 苹果系统macos腾讯企点无法打开麦克风权限
  18. matlab将图片旋转的代码_论文写作经验分享word+mathtype+matlab
  19. [转]开源协议MIT、GPL、LPGL、BSD、MIT的区别
  20. 大数据开发必备面试题Hive篇

热门文章

  1. fprintf函数的用法matlab_极力推荐这个Matlab教程
  2. 「题解」:[组合数学]:Perm 排列计数
  3. 【题解】Luogu P2347 砝码称重
  4. C语言学习一个月后感想
  5. js如何获取服务器端时间?
  6. 数据结构与算法——选择排序
  7. 查看修改MySQL字符集
  8. JS(JQEERY) 获取JSON对象中的KEY VALUE
  9. 中文(英译) 爱情一句话哲理
  10. 指甲之指甲长期没有甲半月弧(二)