zoukankan      html  css  js  c++  java
  • 上传图片-简易

                                        <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();
        })
    

      

  • 相关阅读:
    Mysql-存储过程-批量增加数据
    VIM
    查看Chrome浏览器同步数据状态工具
    Tomcat运行配置
    mysql的engine不同,导致事物回滚失败的问题
    git在MAC,Linux的terminator(命令行)下自动显示当前分支
    SED单行脚本快速参考(Unix 流编辑器)
    awk中使用shell的环境变量
    Grep Sed Awk
    shred_linux_unix
  • 原文地址:https://www.cnblogs.com/samdx/p/6829206.html
Copyright © 2011-2022 走看看