Framework7实现手机拍照上传并预览

 

一：页面定义

                        <div class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">照片登记</div>
                                <div class="item-input-wrap">
                                    <input id="upload_image" type="file" name="upload_image" accept="image/*"
                                           capture="camera" required validate data-error-message="请上传登记图片!"
                                           onchange="upload('#upload_image', '#customer_image');"/>
                                </div>
                            </div>
                        </div>

                        <div class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">照片预览</div>
                                <div class="item-input-wrap">
                                    <img class="lazy lazy-fade-in" id="customer_image"
                                         src="/jd_ct_terminal/static/app/img/preview.png"
                                         style="width:80%;text-align:center;">
                                </div>
                            </div>
                        </div>

 

二：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) {
        //获取照片,并设置给预览div呈现
        photo = e.target.result //获取图片内容：base64字符串
        $preview.setAttribute("src", photo);
    };
};

 

三：后台提取图片

此处的base64字符串是带前缀的，需要截除。

photo = photo.split(',')[1]