input file 上傳圖片并實現(xiàn)實時預(yù)覽

可以通過file標簽和js的 FileReader 接口來實現(xiàn)此功能:
把選擇的圖片文件調(diào)用readAsDataURL方法
把圖片數(shù)據(jù)轉(zhuǎn)成base64字符串形式顯示在頁面上
給a標簽定義 href屬性 和 download=”文件名.后綴名”,就可以實現(xiàn)點擊下載的功能

 <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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容