图片上传预览 支持html5的浏览器
<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的浏览器的更多相关文章
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
随机推荐
- log4j基本使用方法
通过配置文件可知,我们需要配置3个方面的内容: 1.根目录(级别和目的地) 2.目的地(控制台和文件等) 3.输出样式 Log4j由三个重要的组件构成: 1.日志信息的优先级 日志信息的优先级从高到低 ...
- mysql的联合,连接,子查询
- HDU 5873 Football Games
随便判了几个条件就过了,也不知道对不对的. 正解应该是: $[1].$${s_1} + {s_2} + {s_3} + ...... + {s_n} = n(n - 1)$ $[2].$${s_1} ...
- Symfony命令大全
执行命令: $ php bin/console 查看一下命令 Symfony version 3.1.5 - app/dev/debug Usage: command [options] [argum ...
- [SQL基础教程] 3-4 对查询结果进行排序/ORDER BY
[SQL基础教程] 3-4 对查询结果进行排序/ORDER BY ORDER BY SELECT <列名1>,<列名2>,<列名2>... FROM ORDER B ...
- Chapter 16_5 单一方法
当一个对象只有一个方法时,可以不用创建接口table,但是要将这个单独的方法作为对象来返回.可以参考迭代器那一节,是如何构造一个迭代器函数,那个函数将状态保存为closure. 一个具有状态的迭代器是 ...
- Tiny6410之按键裸机驱动
操作步骤: 第一步:查看开发板电路原理图 找到LED 和按键的管脚所对应的寄存器 LED:(见Tiny6410之LED裸机驱动) nLED_1 - GPK4 nLED_2 - GPK5 nLED_3 ...
- some idea for my personal page
firstly, dump the old personal page source from Github to Dropbox.then the idea is: 1: make a fake s ...
- HDU 5908 Abelian Period (BestCoder Round #88 模拟+暴力)
HDU 5908 Abelian Period (BestCoder Round #88 模拟+暴力) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=59 ...
- Python--变量作用域
变量作用域: 一般在函数体外定义的变量成为全局变量,在函数内部定义的变量称为局部变量. 全局变量所有作用域都可读,局部变量只能在本函数可读 函数在读取变量时,优先读取函数本身自有的局部变量,再去读全局 ...