<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. android 开发心得杂记

    1.Android周刊关注. 2.4季Android性能优化典范 胡凯 http://mp.weixin.qq.com/s?__biz=MzA4NTQwNDcyMA==&mid=4021354 ...

  2. 关于FileSystemXmlApplicationContext和ClassPathXmlApplicationContext路径问题

    在码代码的时候发现使用这两个方法写路径的时候总是存在问题,所以百度了一下解决了这个问题. 关于FileSystemXmlApplicationContext这个路径有2总写法 有盘符的代表的是绝对路径 ...

  3. WebForm 内置对象QueryString、Repeater删改

    一.内置对象QueryString--地址栏数据拼接 格式:?key=value 如:string path = "Default2.aspx?aaa=" + TextBox1.T ...

  4. Android开源库loopj的android-async-http的 JsonHttpResponseHandler 存在死循环GC_CONCURRENT

    我现在用的是 AndroidAsyncHttp 1.4.4 版本,之前遇到一个很奇怪的问题, 当使用 JsonHttpResponseHandler 解析请求的页面出现服务器错误或其他情况返回的内容不 ...

  5. XTU 1246 Heartstone

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$D$题 贪心. 我是这样贪的:开三个优先队列$q[0]$,$q[1]$,$q[2]$,$q[i]$存储对$3$取余之后为$i$的数. 首先看看还 ...

  6. Let's DO IT !

    今天开始逐步自学计算机图形学. 慢慢成长.

  7. ES 6 : let与const

    1.let命令 [ 基本用法 ] let命令的用法与var类似,用于声明一个变量,但是let声明的变量只能在let所在的代码块内有效: 上述代码块中使用let和var声明了两个变量.然后在代码块之外调 ...

  8. 在GNU/Linux下使用命令行自动挂载与卸载USB磁盘

    在命令行环境下如果每次都是靠手动敲入mount与umount命令来挂载与卸载USB磁盘是件很麻烦的事情.尤其是mount命令的参数非常多.比如,磁盘的分区类型(vfat.ntfs等),挂载的目录节点, ...

  9. @classmethod及@staticmethod方法浅析【python】

    目前对于python中@classmethod 类方法和@staticmethod静态方法的有了一定的认识,之后有进一步的认识后继续记录. @classmethod :是和一个class类相关的方法, ...

  10. ajax写法

    $.ajax({ type:'post', url:'<%=path%>/login', cache:false, dataType:'json', success:function(da ...