<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/*"  onchange='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. HTML5 图片上传预览

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

  2. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  3. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

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

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

  7. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

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

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

  9. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

随机推荐

  1. mongodb的Snapshot 隔离级别(记住)

    Snapshot 隔离和 Row Version的工作模式 当启用Snapshot隔离级别时,每一个更新数据的操作都会在tempdb中存储该行的原始副本,术语叫作行版本(RowVersion),SQL ...

  2. ProxySQL 部署 Single Writer Failover 读写分离 (PXC)

    主机信息: Proxysql: 如果你忽略了ProxySQL会报告主机组的变化,我建议把它设置为0,除非你试图调试"某些东西",否则你的日志将很快变得巨大.UPDATE globa ...

  3. 3DMax——室内设计：墙体+吊顶

    1.导入CAD平面图 2.将导入的平面图全部选中→颜色设置为其他颜色→设置为组(设置为组,是为了后期选材质方便) 3.选中图形,选择移动工具,输入坐标为0,右键选择冻结当前选择 4.右键“角度捕捉切换 ...

  4. 再学Java 之 interface的成员变量

    前言:最近在学多线程,写“哲学家就餐问题(Dining Philosophers)”的时候,需要定义一个全局的变量,即哲学家的人数.常用的做法是在其中一个类中定义一个static final的变量,然 ...

  5. wordpress中常用的一些php代码

    <?php the_author(); ?> 显示文章的作者 <?php the_author_description(); ?> 显示文章作者的描述(作者个人资料中的描述) ...

  6. [Java初探实例篇02]__流程控制语句知识相关的实例练习

    本例就流程控制语句的应用方面,通过三个练习题来深入学习和巩固下学习的流程控制语句方面的知识,设计到,if条件判断语句,switch多分支语句,for循环语句及其嵌套多层使用,while循环语句. 练习 ...

  7. 26、redis中默认有多少个哈希槽？

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...

  8. jdk8-lambda-stream的使用

    1, 认识stream(声明式编程) Stream 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的,它更像一个高级版本的 Iterator, 原始版本的Iterator,用户只能一个一 ...

  9. shell脚本案例分享 - 业务系统日志自定义保留或删除需求

    需求说明:  线上某些业务系统的日志不定期产生, 有的每天产生, 有的好几天才产生, 因为系统只有在用的时候才产生日志,日志文件均存放在以当天日期命名的目录下. 当日志目录越来越多时就需要处理, 由此 ...

  10. Spring ResponseEntity

    简单记录下 ResponseEntity 的使用方式 @RequestMapping(value="/demo1" ) public ResponseEntity demo1(){ ...