图片上传预览 支持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 ...
随机推荐
- Uva 10780 Again Prime? No Time.(分解质因子)
题意:给你两个数m和n,问 n! 可以被 m^k 整除的k的最大值 思路:从这道我们可以想到n!末尾有多少个0的问题,让我们先想一下它的思想,我们找 n! 末尾有多少0, 实际上我们是在找n!中5的个 ...
- php7.0 和 php7.1新特性
PHP7.1 新特性 1.可为空(Nullable)类型 类型现在允许为空,当启用这个特性时,传入的参数或者函数返回的结果要么是给定的类型,要么是 null .可以通过在类型前面加上一个问号来使之成为 ...
- 【转】SQL Server 2008 事件探查器(SQL SERVER Profiler)
跟踪数据库sql语句的执行情况.例:一个系统,用到了sql server 数据库,这个系统共有500张表,当用户在前台页面做某一个操作时,比如插入,登录等等,我们想知道此刻是在对哪一张表操作,打开事件 ...
- jquery 获取当前对象的id取巧验证的一种方法
<!doctype html><html><head><meta charset="utf-8"><title>titl ...
- NodeJs md5 sha1加密
var crypto = require('crypto');module.exports = { md5: (str)=> { return crypto.createHash('md ...
- [阿当视频]WEB组件学习笔记
— 视频看完了,自定义事件还不懂,等完全懂了再更新并完成整篇案例 1. JS分层和组件的种类浏览器底层包括HTML CSS JS(DOM/BOM/Style/Canvas 2D/WebGl/SVG) ...
- 搭建gitbook环境
1.官网下载安装nodejs,安装完成后使用终端输入node -v,用cmd命令窗口查看是否安装成功:如下图所示: 2.在cmd命令窗口中输入:npm install -g cnpm -registr ...
- myeclipse连接数据库oracle(添加jdbc.properties)
第一步:在src下面建一个包com.xsl.conf 第二步:在建好的包下面新建一个jdbc.properties 第三步:在jdbc.properties里写入内容如下: driver = orac ...
- FileReader和FileInputStream的区别
1.FileReader和FileInputStream的区别: FileReader.FileWriter处理的是文本文件. FileInputStream/FileOutputStream是继承I ...
- IO流数据读写总结
1.用java自带的IO读写方法 官方API网站:http://docs.oracle.com/javase/7/docs/api/ 2.Apache的Commons-io-2.4.jar中的方法,参 ...