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 ...
随机推荐
- 布局文件提示错误“No orientation specified, and the default is horizontal. This is a common so...”
完整的错误提示信息为:No orientation specified, and the default is horizontal. This is a common source of bugs ...
- UVA 246 - 10-20-30 (模拟+STL)
UVA 246 - 10-20-30 题目链接 题意:给52张的扑克堆,先从左往右发7张牌,之后连续不断从左往右发7张牌,假设有牌堆形成了下面3种情况(按顺序推断): 1.头两张+尾一张和为10或20 ...
- css系列教程--margin padding column(完结)
margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin ...
- js 进阶笔记
JS中substr和substring的用法和区别 substr和substring都是JS截取字符串函数,两者用法很相近, substr方法 返回一个从指定位置开始的指定长度的子字符串. strin ...
- oc特有语法
分类 问题 1.什么是分类? 就是把一个类的功能,分出一部分来放在一个独立的文件中 2.分类的语法是什么样的? @interface Person(SuperMan) 3.分类与类是什么关系? 分类依 ...
- ios9基础知识总结(一)
I--load 类被加载时自动调用,只要类的项目中,运行时就会加载.类一加载,此方法就会调用 //类被加载时调用,只要类的项目中,运行时就会加载,类一加载,此方法就调用 + (void)load { ...
- MySQL基础之 path环境变量的作用 (科普)
在谈mysql配置环境变量之前,先谈一下windows环境变量的作用,有时候在windows cmd窗口运行命令时,经常会出现“XXX不是内部或外部命令的提示” 原因是系统没有找到执行相应命令的文件( ...
- HDU 1088 - Write a simple HTML Browser
直接看sample input = = 又一道模拟. #include <iostream> #include <string> #include <cstdio> ...
- PHP header() http各种状态码大全查询
PHP header()the function declaration: void header ( string string [, bool replace [, int http_respon ...
- VMware下设置CentOS虚拟机与主机同一网段
由于在开发中经常使用到自己的电脑搭建虚拟机器进行个人开发,而虚拟机器每次登录所使用的命令行界面比较小,看起来也不舒服.以下主要对centos虚拟机器下配置与主机共享同一网段IP,通过第三方软件(put ...