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事件,调 ...
随机推荐
- IOS Bugs5 linker command failed with exit code 1 (use -v to see invocation)
Ld /Users/Rubert/Library/Developer/Xcode/DerivedData/OC_Language-emftyzftyvhdpuaxipddjmpnpvox/Build/ ...
- Java System.out的输出缓冲
今天学习了java的正则表达式api,在写例子的时候遇到了让人摸不着头脑的问题:从控制台输入了字符串,却没有输出;直到输入的字符串不能匹配的时,一起与Unabled to match输出.相关代码如下 ...
- WindowsForm通过字符串名称实例化控件
private Control FindControl(Control control, string controlName) { Control c1; foreach (Control c in ...
- android之AutoCompleteTextView控件用法
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面 z
http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...
- 使用NodeJS将XML解析成JSON及性能比较
并不是所有的API都是以JSON格式返回的.我们有时侯不得不处理一些XML.幸运的是有一个NodeJS模块 xml2js 可以帮你做这件事. 比如,我们要处理下面这段XML <?xml ...
- android 4.4 状态栏隐藏
这个是Android Developer上的原文 反正我也看得不是很懂 我知道的就是实现和导航栏和状态栏的透明 带一些渐变效果 1. 设置主题 <style name="Theme.T ...
- ArcGIS Engine 下投影坐标和经纬度坐标的相互转换
ArcGIS Engine 下投影坐标和经纬度坐标的相互转换 投影转经纬度 ); pPoint.Project(pSRF.CreateGeographicCoordinateSystem((int)e ...
- iOS中使用FMDB事务批量更新数据库
今天比较闲看到大家在群里讨论关于数据库操作的问题,其中谈到了"事务"这个词,坦白讲虽然作为计算机专业的学生,在上学的时候确实知道存储过程.触发器.事务等等这些名词的概念,但是由于毕 ...
- MS文件与路径的一些方法记录
一,路径相关 String path1 = System.IO.Directory.GetCurrentDirectory(); MessageBox.Show("获取应用程序的当前工作目录 ...