码迷,mamicode.com
首页 > Web开发 > 详细

js上传图片并预览

时间:2018-03-04 16:35:19      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:capture   setattr   put   center   view   sda   获取   targe   doc   

 

一: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编码。

 

js上传图片并预览

标签:capture   setattr   put   center   view   sda   获取   targe   doc   

原文地址:https://www.cnblogs.com/ygj0930/p/8505014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!