前端 上传图片，显示缩略图（二） 2015年12月23日
学习
0 条评论

上次尝试解决这个图片上传缩略图的问题，遇到了瓶颈，这次解决了。

通过h5新特性file，基本实现了我要的功能，写了个demo分享一下。

一、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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" onchange="preview(this)"/>
 
<h3>设计理念说明（200字以内）</h3>
<textarea onkeyup="checkLen(this)"></textarea>
 
<div>您还可以输入 <span id="count">200</span> 个文字</div>
 
<script type="text/javascript">
    function checkLen(obj) {
        var maxChars = 200;//最多字符数
        if (obj.value.length > maxChars)
            obj.value = obj.value.substring(0, maxChars);
        var curr = maxChars - obj.value.length;
        document.getElementById("count").innerHTML = curr.toString();
    }
</script>
<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>

照着这个套路写就对了，简单愉快。

二、总结

顺带一提，在IE上也是支持的这样去浏览缩略图的，真是不容易。

Post Views: 98