input file 上传图片并实现实时预览

可以通过file标签和js的 FileReader 接口来实现此功能：
把选择的图片文件调用readAsDataURL方法
把图片数据转成base64字符串形式显示在页面上
给a标签定义 href属性 和 download=”文件名.后缀名”，就可以实现点击下载的功能

 <img class="thumbnail" id="*selectImg*" width="200px" src="/static/web/img/product/{{ ob.product_pic }}"  alt="message user image">
<label for="file">选择修改图片</label>
<input type="file" class="btn btn-primary" id="uploadImg" accept="image/png,image/jpg,image/jpeg,image/gif" onchange="xmTanUploadImg(this)">

<script>
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {    //成功读取文件
            var img = document.getElementById("selectImg");
            img.src = e.target.result;  
        };
    }
</script>