图片回显

图片回显使用tp5

• 控制器

public function uploadImg(){
    $file = request()->file('file');
    if($file){
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
            // 成功上传后 获取上传信息
            return 'uploads/'. $info->getSaveName();
        }else{
            // 上传失败获取错误信息
            return $file->getError();
        }
    }
}else{
    return '请上传图片'
}

• 页面

<!--html部分-->
<!--用作ajax请求提交表单参数-->
<input type="hidden" name="img" id="headimg" value="">、
<!--展示图片-->
选择图片<input type="file" id="uploadimg"/>
<!--上传图片-->
<img src="__STATIC__/index/img/b4_p1.jpg" id="scimg"/>

<!--jquery部分-->
<script src="jquery地址"></script>
<script>
    $("#uploadimg").change(function(e) {
        var imgBox = e.target;
        var file = imgBox.files[0];
        var form=new FormData();
        form.append('file',file);
        $.ajax({
            //请求地址  {:url('控制器名称/上传图片的方法')}
            url:"{:url('Index/uploadImg')}",
            data:form,
            type:"post",
            contentType: false,// jQuery不要去设置Content-Type请求头
            processData: false,// jQuery不要去处理发送的数据
            success:function(data){
                $("#scimg").attr('src',data);
                $("#headimg").val(data);
            }
        })
    });
</script>

前台获取二进制数据进行回显

<!--html部分-->
<!--用作ajax请求提交表单参数-->
<input type="hidden" name="img" id="headimg" value="">、
<!--展示图片-->
选择图片<input type="file" id="uploadimg"/>
<!--上传图片-->
<img src="__STATIC__/index/img/b4_p1.jpg" id="scimg"/>

<!--jquery部分-->
<script src="jquery地址"></script>
<script>
    $("#uploadimg").change(function(e) {
        var imgBox = e.target;
        var file = imgBox.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
             $("#scimg").attr('src',this.result);
             $("#headimg").val(this.result);
        }
    });
</script>