Snandy
Two ways of achieving
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
<!DOCTYPE HTML> <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"> functionpreview1(file) { varimg = newImage(), url = img.src = URL.createObjectURL(file) var$img = $(img) img.onload = function() { URL.revokeObjectURL(url) $(‘#preview‘).empty().append($img) } } functionpreview2(file) { varreader = newFileReader() reader.onload = function(e) { var$img = $(‘‘).attr("src", e.target.result) $(‘#preview‘).empty().append($img) } reader.readAsDataURL(file) } $(function() { $(‘[type=file]‘).change(function(e) { varfile = e.target.files[0] preview1(file) }) }) </script><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> |
Url.revokeobjecturl Method Opera does not support, FileReader except IE9 and below does not support, other browsers are Supported.
Related:
Https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
Https://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL
HTML5 Picture Preview
