图片上传后即时预览
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5 //設置圖片上傳后預覽的div樣式
6 <style type="text/css">
7 #preview, .img, img
8 {
9 width:200px;
10 height:200px;
11 }
12 #preview
13 {
14 border:1px solid #000;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="preview"></div>
20 <input type="file" onchange="preview(this)" />
21 //圖片上傳和預覽
22 <script type="text/javascript">
23 function preview(file)
24 {
25 var prevDiv = document.getElementById('preview');
26 if (file.files && file.files[0])
27 {
28 var reader = new FileReader();
29 reader.onload = function(evt){
30 prevDiv.innerHTML = '
31 <img src="' + evt.target.result + '" />
32 ';
33 }
34 reader.readAsDataURL(file.files[0]);
35 }
36 else
37 {
38 prevDiv.innerHTML = '
39 <div class="img"
40 style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
41 ';
42 }
43 }
44 </script>
45 </body>
46 </html>
?
總結
- 上一篇： JBuilder中光标错位的解决办法
- 下一篇： 集合详解（三）----Map的两种遍历方