<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. Ubuntu 14.04—无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系 解决办法

    在Ubuntu中使用sudo apt-get install安装是有时候会出现: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系   解决办法 这样的错误,这是因为更新源 ...

  2. 网络爬虫之定向爬虫:爬取当当网2015年图书销售排行榜信息(Crawler)

    做了个爬虫,爬取当当网--2015年图书销售排行榜 TOP500 爬取的基本思想是:通过浏览网页,列出你所想要获取的信息,然后通过浏览网页的源码和检查(这里用的是chrome)来获相关信息的节点,最后 ...

  3. for for-in foreach 循环

    var a = [1, 2, 3, 4, 5] //for用来便利数组元素非常简单 for (var i = 0; i < a.length; i++) { console.log(a[i]) ...

  4. sphinx cmd command

    D:\iso\gaoqiao\app\sphinx\bin\indexer.exe -c D:\iso\gaoqiao\app\sphinx\bin\sphinx.conf --all --rotat ...

  5. Makfile文件编写

    一.make是什么 GNU make是一个工程管理器,专门负责管理.维护较多文件的处理,实现自动化编译.如果一个工程项目中,有成百上千个代码源文件,若其中一个或多个文件进过修改,make就需要能够自动 ...

  6. 【Python】回文

    首先判断一个字符串是否回文: def isPlalind(s): if len(s) == 1: return True else: return s[0] == s[-1] and isPlalin ...

  7. 运动框架实现思路(js)

    思路:速度.(改变left,right,width,height,opacity) 2.缓冲动画. 3.多物体运动. 4.任意值变化. 5.链式运动. 6.同时运动.

  8. UNIX基础--磁盘组织

    磁盘组织 FreeBSD 查找文件的最小单位是文件名. 而文件名区分大小写,不凭文件扩展名去识别这个文件是 程序. 文档, 或是其他格式的数据. 在文件系统里目录和文件的作用是存储数据. 每一个文件系 ...

  9. C#发送邮件类

    一.定义邮件发送类 /// <summary> /// 发送邮件 /// </summary> public class MailHelper { #region 私有变量 p ...

  10. Java Swing 记事本代码

    记事本代码分为4个部分: 1.顶部点击可展开的菜单如何生成?2.当点击了顶部菜单的某一个子菜单,在程序中如何判断点击了哪个子菜单?[正在写]3.那个供你输入文字并且可以滚动的文本框如何生成?4.点击了 ...