- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <style type="text/css">
- #preview, .img, img
- {
- width:200px;
- height:200px;
- }
- #preview
- {
- border:1px solid #000;
- }
- </style>
- </head>
- <body>
- <div id="preview"></div>
- <input type="file" οnchange="preview(this)" />
- <script type="text/javascript">
- function preview(file)
- {
- var prevDiv = document.getElementById('preview');
- if (file.files && file.files[0])
- {
- var reader = new FileReader();
- reader.onload = function(evt){
- prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
- }
- reader.readAsDataURL(file.files[0]);
- }
- else
- {
- prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
- }
- }
- </script>
- </body>
- </html>
转载于:https://www.cnblogs.com/qjyking/p/5736743.html