ajax 上传图片

<img class="edit_face" onclick="file_selector.click()"  style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 0;">
<p style="width: 40%; height: 50px; line-height: 50px; margin-left: 50px; display: none;">
<input id="file_selector" onchange="edit_face(this)" name="f" type="file">
</p>
 function edit_face(){
        $f = $('#file_selector');
        var animateimg = $f.val(); //获取上传的图片名 带//
        animateimg == '' || animateimg == undefined ? layuiShow('请选择上传文件!') : '';
        var imgarr=animateimg.split('\\'); //分割
        var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
        var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
        var ext = myimg.substring(houzui, myimg.length).toUpperCase().toLowerCase();  //切割 . 获取文件后缀
        var file = $f[0].files[0]; //获取上传的文件
        var fileSize = file.size;           //获取上传的文件大小
        var maxSize = 2097152;              //最大2MB
        if(ext !='.jpg' && ext !='.gif' && ext !='.png' && ext !='.jpeg'){
            layuiShow('文件类型错误,只能上传:jpg/gif/png/jpeg 类型文件!');
//            return false;
        }else if(parseInt(fileSize) >= parseInt(maxSize)){
            layuiShow('上传的文件不能超过2MB');
        }else{
            //创建FormData对象
            var data = new FormData();
            //为FormData对象添加数据
            $.each($f[0].files, function(i, file) {
                data.append('upload_file'+i, file);
            });
            var iniLoad;
            $.ajax({
                type:"POST",
                url:url+"user/Login/edit_face",
                data: data,
                dataType:"json",
                processData: false,
                contentType: false,
                beforeSend: function () {
                    iniLoad = layer.load();//加载
                },
                success:function(dt){//成功返回之后调用的函数
                    layer.close(iniLoad);//关闭加载
                    isRetUrl(dt);
                    if(dt.success){
                        $('.face').attr('src',dt.data);
                        $('.edit_face').attr('src',dt.data);
                    }else {
                        layuiShow(dt.message);
                    }
                }
            });
        }
    }


Jsky博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论