HTML5图片预览
两种方式实现
- URL
- FileReader
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 图片上传预览</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style>
<script src="../jquery/jquery-1.8.3.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[0]
preview1(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>
URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。
HTML5图片预览的更多相关文章
- 如何在HTML5 图片预览
HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...
- HTML5图片预览 放大
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
- HTML5实现图片预览功能
两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- 基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
随机推荐
- error LNK2001
error LNK2001: 无法解析的外部符号 "public: virtual void __cdecl Observer::update(float,float,float)" ...
- 【转】C++实现RTMP协议发送H.264编码及AAC编码的音视频
RTMP(Real Time Messaging Protocol)是专门用来传输音视频数据的流媒体协议,最初由Macromedia 公司创建,后来归Adobe公司所有,是一种私有协议,主要用来联系F ...
- SVN：冲突解决 合并别人的修改
在项目中,基本不可避免多个人同时参与一个项目,因此就可能会出现多个人同时修改一个文件的情况,就不可避免的会出现冲突.svn已经很聪明了,如 果你和别人对于同一个文件的修改之间不存在重叠(比如你在文件最 ...
- Oracle学习笔记(1)——查询及删除重复数据
1.查找表中多余的重复记录(根据单个字段studentid) select * from table_name where studentid in (select studentid fro ...
- Conquering Keokradong && Get the Containers(二分)
Conquering Keokradong Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu ...
- 【二分答案】【POJ3122】【Northwestern Europe 2006】Pie
Pie Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10629 Accepted: 3744 Special Ju ...
- iOS 使用自定义的字体
一.新建一个工程,准备好要使用的字体,后缀为.ttf或者.otf格式. 二.将字体直接拖入工程项目中. 三.在Info.plist中添加一个新的Key:Fonts provided by applic ...
- 在T-SQL语句中访问远程数据库(openrowset/opendatasource/openquery)
1.启用Ad Hoc Distributed Queries 在使用openrowset/opendatasource前搜先要启用Ad Hoc Distributed Queries服务,因为这个服务 ...
- 理解Window和WindowManger
一.Window简介 作用:桌面上显示一个类似悬浮的东西. 介绍:Window是一个抽象类,实现是由PhoneWindow.WindowManager是外界访问Window的入口.但是最终实现是在Wi ...
- Linux下vim文件未正常退出，修复文件
Linux下vim文件未正常退出,会产生一个 .文件名.swp的文件 ls -al ,rm 删掉.swp文件 之后就可以正常使用文件了