<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. .net: 不能忽视的break——寻找VS2010和VS2012编译器的一个小区别

    文中的问题来自于实际开发,但是实际开发中的代码逻辑比较复杂,因此下面的代码去掉了所有逻辑,只保留能体现问题的代码,类和都只为了说明问题,并不具有实际意义.下面首先看看下面的代码和现象. 1. 问题再现 ...

  2. CUDA开发时用到的各种Linux命令

    cat 读取文件中的全部内容. 例:cat cuda_add.cu

  3. MyBatis 学习-动态 SQL 篇

    MyBatis 为我们提供了如下几个动态 SQL 元素: if choose foreach where/set trim 一.IF 元素 <select id="selectProj ...

  4. win7安装iis及web配置教程

    下面iis教程只适用win7或win8系统的服务器配置,如果您使用的是xp系统或win2003系统请看:xp或2003安装iis及web配置教程 .注:新手如果嫌iis安装配置麻烦建议下载PageAd ...

  5. magento中对获取的数据在前台进行分页显示

    1.数据加载类class Bf170_Bf170Logistics_Block_Inquiry_Index extends Mage_Core_Block_Template {        publ ...

  6. JS 一些常用技巧

    记录 JS 常用的技巧 1. 生成随机数 2. 解决浮点数问题 3. 无路可走时,看看是不是 事件 冒泡了...

  7. HTML中<title>与<h1>区别

    1)<title>标签表示的标题是整个网页的名字,即在浏览器顶部的tab栏里显示的.搜索引擎通过它来搜索网页:<title>标签里的文本不出现在页面内容里面. <h1&g ...

  8. Recursive - leetcode [递归]

    经验tips: Recursion is the best friend of tree-related problems. 一是只要遇到字符串的子序列或配准问题首先考虑动态规划DP,二是只要遇到需要 ...

  9. wpf listview 行变色

    <ListView x:Name="listView_Date" Grid.Row="3" BorderBrush="{x:Null}" ...

  10. sql中判断是否存在某个对象

    If object_id(N'对象名',N'对象类型') is not null   例如:表是否存在 if object_id(N'tablename',N'U') is not null begi ...