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 ...
随机推荐
- Unity 两张背景的切换平移
两张背景图片向左移动,当屏幕看见的时候. 使用的是Unity自带的Sprite,当然也可以使用NGUI Sprite using UnityEngine; using System.Collectio ...
- 所闻所获6:meditashayne项目总结
项目源码下载地址: https://github.com/ShayneYeorg/Meditashayne 1.首先一开始设计这个App的时候,我就希望它能比系统自带的备忘录更方便:比如备忘录需要手动 ...
- LDAP实例异常停止日志提示虚拟内存virtual memory不足
[05/Oct/2014:20:50:37 +0800] - ERROR<5135> - Resource Limit - conn=-1 op=-1 msgId=-1 - Memory ...
- thinkphp的条件的多种写法
class SelectAction extends Action{ function index(){ //thinkphp 查询语言 // 1.普通查询 // 2.区间查 ...
- SQL Server2008R2安装失败问题之语言包问题
今天安装SQL Server2008 的时候出现了,如下的的问题,安装过程在ExcuteStandardTimingsWorkflow时候报错,结束安装. 提示: ...
- 小项目--反eclass
前言—— 最近会把前一段时间闲的无聊写的一些很小的项目写一些博客,用来练练手. 引子—— 最近班里有个很讨厌的软件,,,,教育局规定每个学校要上传多媒体使用记录,所以学校就给班里每台电脑上装了一个比较 ...
- php非递归无限级分类.
项目需要.递归无限级分类效率实在太低.理了半天思路写的. 分类越多效率越高. /** * 单次循环返回无限极分类嵌套 * @param array $data 操作的数组 * @param strin ...
- 「北京」京东 JD.COM 招聘中/高级前端工程师
工作职责: 负责前端界面的前端构建,各类交互设计与实现: 前端样式和脚本的模块设计及优化: 协同后台开发人员完成项目: 职位要求: 专科及以上学历,2年以上前端重构与脚本开发经验,计算机或相关专业者优 ...
- php 数组 array_intersect_key() array_unique()移除重复
<?php // array_unique($array) 去除重复 // array_unshif()向数组的顶部追加函数 // array_shif($a,"ss")向数 ...
- python3.4下遍历文件目录,不需要再特殊处理中文编码
python3.4下遍历文件目录,不需要再特殊处理中文编码 直接使用os.walk来遍历中文目录. os.walk方法返回的是一个三元 tupple(dirpath, dirnames, filena ...