图片上传前预览，两种方式可实现

Posted 2021-03-15 10yearsmanong

表单提交，前端html:

<img id="avatar" style="width: 220px;height: 230px;" alt="image" src="__AVATAR__/boy.png"/>
<input id="image" name="image" type="file" style="display: none">
<script>
    /**上传头像**/
    $(‘#avatar‘).click(function () {
     $("#image").trigger(‘click‘);
    });
    $(‘#image‘).on(‘change‘, function () {
     var imgdate = $(this).get(0);
     var showing = document.getElementById(‘avatar‘);
     if (imgdate.files && imgdate.files[0]) {
         showing.src = window.URL.createObjectURL(imgdate.files[0]);
     }
    });
</script>

后台接收：

<?php 
    public function after_write()
    {
        if(!empty(Request::instance()->file(‘image‘)) && $this->validate !== ‘Users.pass‘)
        {
            $this[‘image‘] = $this->upload($this[‘uid‘]);
            $this->validate(false)->setEvent(false)->save($this->data);
        }
    }
    protected function upload($id)
    {
        $file = Request::instance()->file(‘image‘);
        $image = $file->move(IMAGE_PATH,$id);
        if($image){
            return VIEW_IMAGE_PATH . ‘/‘ . $image->getSaveName();
        }
    }
?>

ajax提交，前端html:

<form id="fileForm" enctype="multipart/form-data" action="{:url(‘uploadImg‘)}" method="post">
    <input type="file" id="file" name="file" style="display: none;">
</form>
<button type="button" class="btn btn-white btn-success btn-round" onclick="upload();">
    添加图片
</button>
<script>
    function upload() {
     $(‘#file‘).trigger(‘click‘);
    }
    $(‘#file‘).on(‘change‘,function () {
     var uid = $(‘.ace-thumbnails‘).data(‘uid‘);
     var num = parseInt($(‘.ace-thumbnails‘).find(‘li‘).length)+1;
     $(‘#fileForm‘).ajaxSubmit(function (result) {
         if(result.code){
             var _html = ‘<li>‘+
                     ‘<input type="hidden" name="img[‘+num+‘][id]" value=""  >‘+
                     ‘<input type="hidden" name="img[‘+num+‘][uid]" value="‘+uid+‘"  >‘+
                     ‘<img id="img_card_‘+num+‘" width="150" height="150" alt="150x150" src="‘+result.data+‘" />‘+
                     ‘<input type="hidden" name="img[‘+num+‘][image]" id="input_card_‘+num+‘" value="‘+result.data+‘">‘+
                     ‘</li>‘;
             $(‘.ace-thumbnails‘).append(_html);
             $(‘.ace-thumbnails [data-rel="colorbox"]‘).colorbox(colorbox_params);
         }
         else {
             $.alert(‘添加失败‘,result.msg,‘error‘);
         }
     });
    });
</script>

后台接收：

<?php
   /**
     * @note上传图片
     */
    public function uploadImg(){
        $file = Request::instance()->file(‘file‘);
        if(empty($file)){
            $this->error(‘上传数据为空‘);
        }
        else{
            $info = $file->move(IMAGE_PATH.‘/temp/‘,time().rand(100,999));
            if($info == false){
                $this->error($file->getError());
            }
            else{
                $image = VIEW_IMAGE_PATH.‘/temp/‘.$info->getSaveName();
                $this->success(‘上传成功‘,null,$image);
            }
        }
    }
?>

ajax提交，前端html

<form id="fileForm" enctype="multipart/form-data" action="{:url(‘uploadImg‘)}" method="post">
    <input type="file" id="file" name="file" style="display: none;">
</form>

<button type="button" class="btn btn-purple btn-white btn-round" onclick="upload({$key});">{$vo.enum_name}</button>

var imgId;//全局变量
//文件上传触发
function upload(id) {
    $(‘#file‘).trigger(‘click‘);
    imgId = id;
}
$(‘#file‘).on(‘change‘,function () {
    $(‘#fileForm‘).ajaxSubmit(function (result) {
        if(result.code){
            $(‘#img‘+imgId).find(‘ul img‘).attr(‘src‘, result.data);
            $(‘#img‘+imgId).find(‘ul input‘).val(result.data);
        }
        else {
            layer.alert(result.msg,{icon:2});
        }
        $("#file").val("");
    });
});