网站首页JavaScript
上传图片预览

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片预览</title>
</head>
<body>
<input name="thumb" type="file" accept="image/*" style="display:none;">
<button data-action="select-thumb">上传</button>
<img id="thumb-preview" style="clear:both;display:block;margin-top:8px;width:200px;height:auto;"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript">
function addSelectThumbListener() {
    // 注意：这里必须先用off()解除change事件绑定，再用on()绑定change事件，否则会造成两次触发change事件的bug
    $('input[name="thumb"]').off('change').on('change', function () {
        var file = $(this)[0].files[0];
        if (typeof file == 'object') { // 点击了文件域但最终取消操作没选择任何文件那么file的值为undefined，故这里要判断一下
            console.log('---------- 图片相关信息·开始 ----------');
            console.log('图片名称：' + file.name);
            console.log('图片类型：' + file.type);
            console.log('图片大小：' + file.size + ' 字节');
            console.log('---------- 图片相关信息·结束 ----------');

            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function (e) {
                $('#thumb-preview').attr('src', this.result); // this.result为图片的base64编码
            };
        }

        // 重置文件域，否则无法再次选择上次选择的图片，并且由于文件域被重置所以需要重新设置监听事件
        $('input[name="thumb"]').replaceWith('<input name="thumb" type="file" accept="image/*" style="display:none;">');
        addSelectThumbListener();
    });
}

$(function () {
    // 模拟点击文件域
    $('button[data-action="select-thumb"]').click(function () {
        addSelectThumbListener();
        $('input[name="thumb"]').click();
    });
});
</script>
</body>
</html>