上传图片-简易

Posted 2020-09-17 Sam_camel

                                    <div class="col-sm-3">
                                        <div class="imguploadbox">
                                                <label for="imgUpload">
                                                <input type="file" id="imgUpload" accept=".png,.jpg" style="display: none">
                                            </label>
                                            <div class="addimg">
                                                <?php if($model->thumb): ?>
                                                    <img src="<?= $model->thumb ?>_120X120.png" class="img-circle" id="user_img"">
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-9">
                                        <div class="editavatarcontrol" style="margin-left:25px;">
                                            <p>支持格式：JPEG / PNG 512X512, < 1MB</p>
                                            <button type="button" class="btn btn-avatar" id="image-change-btn">修改图片</button>
                                        </div>
                                    </div>

　　

  $(‘#imgUpload‘).on(‘change‘,function(){
            imgUpload();
    });

    function imgUpload(){
        var formdata = new FormData();
        formdata.append(‘UploadForm[imageFile]‘,$(‘#imgUpload‘)[0].files[0]);
        $.ajax({
            url:‘/site/upload‘,
            type: ‘post‘,
            cache:false,
            data: formdata,
            processData:false,
            contentType:false,
            success:function(data){
                if(data === ‘error‘){
                    $.confirm({
                        title : ‘提示‘,
                        content : ‘图片大小格式不符,请选择合适图片‘,
                        buttons : {
                            confirm : {
                                text : ‘确认‘
                            }
                        }
                    })
                }else{
                var tempImg = $(‘<img/>‘);
                tempImg.attr(‘src‘,data+‘_120X120.png‘);
                tempImg.attr(‘width‘,‘120‘);
                tempImg.attr(‘height‘,‘120‘);
                $(‘#user_img‘).remove();
                $(‘.addimg‘).empty().append(tempImg);
                window.location.reload();
                }
            },
            error:function(e){

                $.confirm({
                    title: ‘提示‘,
                    content: ‘头像上传遇到错误，请检查图片‘,
                    buttons: {
                        confirm: {
                            text: ‘确认‘
                        }
                    }
                })
            }
        })
    }
    $(‘#image-change-btn‘).click(function(){
        $(‘#imgUpload‘).click();
    })