<img src="" width="100px" height="100px"/>
<input type="file" onchange="showPreview(this)"/>
//图片预览的
function showPreview(source){
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
$(source).parent().children("img").attr("src",e.target.result);
};
fr.readAsDataURL(file);
}
}

图片上传预览 支持html5的浏览器的更多相关文章

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

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

  2. HTML5 图片上传预览

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

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

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

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

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

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

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

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

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

  7. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

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

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

  9. html 图片上传预览

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

随机推荐

  1. Intellj idea 安装JUnit

    1.file-Settings-Plugins-Browse repositories-HTTP Proxy Settings将No proxy改成Auto-detect proxy settings ...

  2. hdu2159二维费用背包

    题目连接 背包九讲----二维费用背包 问题 二维费用的背包问题是指:对于每件物品,具有两种不同的费用:选择这件物品必须同时付出这两种代价:对于每种代价都有一个可付出的最大值(背包容量).问怎样选择物 ...

  3. css学习之 display:inline-block;

    设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container ):通俗讲就是:将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内 ...

  4. 2017中国数据库技术大会(DTCC)又要来啦!期待~~

    2017第八届中国数据库技术大会(DTCC2017)将于2017年5月11-13日如约而至.2017中国数据库技术大会(DTCC)以"数据驱动•价值发现"为主题,汇集来自互联网.电 ...

  5. [Q]系统环境改变导致“未注册”的解决方法

    据用户反映设置账户开机密码后显示未注册, 具体表现: 1. 重装试用版,重新获取注册申请码,发现注册申请码跟原来没有发生变化. 2. 重新使用原来的授权文件注册,但打开后显示未注册. 3. 发现“** ...

  6. [SOJ] 商人的宣传

    Description Bruce是K国的商人,他在A州成立了自己的公司,这次他的公司生产出了一批性能很好的产品,准备宣传活动开始后的第L天到达B州进行新品拍卖,期间Bruce打算将产品拿到各个州去做 ...

  7. STM32_USART

    USART_InitTypeDef USART_InitStruct; //system_stm32f4xx.c 316 8//stm32f4xx.h 123 25000000 8000000 //1 ...

  8. Tiny6410之LED裸机驱动

    操作步骤: 第一步:查看开发板电路原理图 找到LED 的管脚所对应的寄存器 nLED_1 - GPK4 nLED_2 - GPK5 nLED_3 - GPK6 nLED_4 - GPK7 由原理图可知 ...

  9. Android服务

    开启服务 (startservice) 服务一旦开启与调用者没有任何的关系 , 调用着的activity 即便是退出了 也不会影响 后台的service的运行. 在activity里面 不能去调用服务 ...

  10. portal安装常见问题

    1.创建portaladmin的url? https://portal.smart.ningbo:7443/arcgis/home/createadmin.html 2.创建portaladmin一闪 ...