<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. 【liferay】4、liferay的权限体系

    liferay中有几个概念 1.user_ 表存放liferay的用户 2.usergroup 用户组 3.角色 4.组织,组织可以是站点的成员 5.站点 6.团队 liferay中所有的东西都被视为 ...

  2. Redis笔记(2)单机数据库实现

    1.前言 上节总结了一下redis的数据结构和对象构成,本章介绍redis数据库一个基本面貌,是如何设计的. 2.数据库 服务器结构redisServer: redisDb *db: 一个数组,保存服 ...

  3. 一口一口吃掉Hexo（五）

    如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 通过前四节的内容,相信你已经能够在你的虚拟主机上成功部署网站,并且能够通过你自己的域名访问你的网站了,接下来要做的就是日 ...

  4. 全网最详细的Sublime Text 3的设置字体及字体大小（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 你也许是如下的版本:   点 ...

  5. 对称加密-AES

    假设有一个发送方在向接收方发送消息.如果没有任何加密算法,接收方发送的是一个明文消息:“我是小灰”. 如果消息被中间人截获到,即使中间人无法篡改消息,也可以窥探到消息的内容,从而暴露了通信双方的私密. ...

  6. mysql pdo设置显示报错

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);    

  7. JavaWeb 简单实现客户信息管理系统

    项目介绍 本项目使用Jsp+Servlet+MySQL实现 功能介绍 查询客户信息:查询数据库中所有客户信息,分页展示 添加客户信息:创建新客户并添加到数据库中 搜索客户信息:根据用户的输入查询客户信 ...

  8. 《Netty权威指南》（三）Netty 入门应用

    Netty 服务端   Netty 客户端

  9. ExecutorService接口概要

    ExecutorService接口继承于Executor接口,主要提供以下额外功能: 管理终结 产生Future对象,用于跟踪一个或多个任务的进度.   ExecutorService可以被shut ...

  10. ELK之filebeat

    1.概述 filebeat使用go语言开发,轻量级.高效.主要由两个组件构成:prospector和harvesters. Harvesters负责进行单个文件的内容收集,在运行过程中,每一个Harv ...