html5 图片转base64预览显示
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 图片上传预览</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: %;
height: %;
}
</style>
<script src="../static/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript"> //方法一
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file);
var $img = $(img);
img.onload = function() {
URL.revokeObjectURL(url);
$('#preview').empty().append($img)
}
} //方法二
function preview2(file) {
var reader = new FileReader();
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result);
$('#preview').empty().append($img)
};
reader.readAsDataURL(file)
} $(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[];
preview1(file);
//preview2(file)
})
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="imageUpload"/>
<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>
html5 图片转base64预览显示的更多相关文章
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- [javascript]——移动端 HTML5 图片上传预览和压缩
在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...
- HTML5图片上传预览
HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...
- html5 图片上传 预览
<html><body><fieldset> <legend>测试</legend> <div class="form-gr ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- jQuery + ashx 实现图片按比例预览、异步上传及显示
目录(?)[-] 注ajax 方式异步读取数据库显示图片的方法同上传一致使用 ashx 返回base64字符串在客户端处理即可 记录一个让我纠结良久的问题 在Page_Load 函数中只有第一个用 S ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...
随机推荐
- 从网站上复制代码到MyEclipse后每行都是字符编码错误的解决办法
注意图中的工具栏的按钮:Show Whitespace Characters(Window->Preferences->General->Editors->Text Edito ...
- org.hibernate.id.IdentifierGenerationException: Unknown integral data type for ids : java.lang.String
org.hibernate.id.IdentifierGenerationException: Unknown integral data type for ids : java.lang.Strin ...
- mysql小问题
报错信息如下: 主要是因为用root用户登录查询其他用户的表,结果这个用户不存在了,所以导致没有权限.临时解决办法,给root赋所有权限: grant all privileges on *.* to ...
- OAF_架构MVC系列3 - View的概述（概念）
2014-06-18 Created By BaoXinjian
- suibi
测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等. 我所了解的模块接口测试大体分为两类:模块接口测试和web接口测试 模块接口测试是单元测试的基础.它主要测试模块的调用 ...
- vs2015编译boost 64位
---恢复内容开始--- step 1: 打开Developer Command Prompt for VS2015命令行窗口 step 2: 执行bootstrap.bat,产生bjam.exe s ...
- MyBatis返回主键
网上给的例子都很简单 , 只要用useGeneratedKey就行了. @Insert({ "INSERT INTO money_record_increasement (id, creat ...
- netty中LengthFieldBasedFrameDecoder的使用
在org.jboss.netty.handler.codec.frame包中,有LengthFieldBasedFrameDecoder类用来解析带有长度属性的包,只要我们在传输协议中加入包的总长度就 ...
- java中的IO整理
写在前面:本文章基本覆盖了java IO的全部内容,java新IO没有涉及,因为我想和这个分开,以突出那个的重要性,新IO哪一篇文章还没有开始写,估计很快就能和大家见面.照旧,文章依旧以例子为主,因为 ...
- 聚合查询中的Group by
2005版本以上的sql server 查询中如果既包含聚合函数列(诸如sum ,count,avg,max等)又存在一般列的情况,则查询字符串结尾必须包含Group By [某一般列]. 其实微软 ...