js上传图片并预览

Posted 2020-10-26 ygj0930

 

一：html代码

<input id="upload_image" type="file" accept="image/*" capture="camera"onchange="upload(‘#upload_image‘, ‘#preview_image‘);"/>
                               
<img id="preview_image" src="" style="width:80%;text-align:center;">

 

二：js代码

//照片
var photo = null

//上传图片
function upload(upload_id, preview_id) {
    var $upload = document.querySelector(upload_id),
        $preview = document.querySelector(preview_id),
        file = $upload.files[0],
        reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        //获取照片
        photo = e.target.result
        $preview.setAttribute("src", photo);
    };
};

上传图片：直接把photo上传即可，photo保存了图片的base64编码。