收藏 分享(赏)

html5图片预览实例分享_0.doc

上传人:kuailexingkong 文档编号:1181660 上传时间:2018-06-17 格式:DOC 页数:2 大小:15KB
下载 相关 举报
html5图片预览实例分享_0.doc_第1页
第1页 / 共2页
html5图片预览实例分享_0.doc_第2页
第2页 / 共2页
亲,该文档总共2页,全部预览完了,如果喜欢就下载吧!
资源描述

1、 HTML5 图片预览实例分享HTML5 图片预览需要用到两种方法1.URL2.FileReader直接上代码代码如下:!DOCTYPE HTMLhtmlheadmeta charset=“utf-8“titlehtml5 图片上传预览/titlestyle#preview width: 300px;height: 300px;overflow: hidden;#preview img width: 100%;height: 100%;/stylescript src=“./jquery/jquery-1.8.3.js“/scriptscript type=“text/javascript“f

2、unction 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.tar

3、get.result)$(#preview).empty().append($img)reader.readAsDataURL(file)$(function() $(type=file).change(function(e) var file = e.target.files0preview1(file)/script/headbodyform 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 及以下不支持,其它浏览器都支持。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 经营企划

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报