0
点赞
收藏
分享

微信扫一扫

HTML5图片预览


两种方式实现

  • URL
  • FileReader


URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。


相关:

https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL

https://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL

代码如下:



<!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="http://code.jquery.com/jquery-1.10.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[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>

举报

相关推荐

0 条评论