图片上传,头像上传

小小坤 小小坤     2022-09-14     757

关键词:

简介

      在平时前端开发中,图片上传与头像上传是必不可少的。下边我把上传头像做了一个小的例子,希望大家能够使用。代码是一年前写的,对于新手老手来说,一看即懂。如果想要封装好的可以加群找我要哦!

分析

    上传图片,我们需要我们可以选择form表单上传,或者ajax上传,本篇文章主要讲述ajax模拟form表单上传图片。看段代码分析一下。

 var formData = new FormData();
     formData.append("image", blob);
     $.ajax({
          url: url_get("Api/imgupload"),//获取绝对路径
          type: 'POST',
          data: formData,
          async: false,//同步
          cache: false,//cache设置为false,上传文件不需要缓存。
          contentType: false,//contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
          processData: false,//processData设置为false。因为data值是FormData对象,不需要对数据做处理。
          success: function (result) {
                 //console.log(result)
                  _firste = 0;
                 var result = JSON.parse(result);
                 $('.userImg>img').attr('src', result.url);
                 $(".up_imgdlag").hide();
                 $(".up_imgdlag_box").hide();
          },
          error: function (result) {
                 console.error(result)
          }
    });

这是ajax模拟form表单上传图片中的代码。上传图片则无需裁剪。下边看一些头像上传代码。目前我这种方式是使用使用html5的fileapi 和canvas,故仅支持chrome,firefox及ie10以上版本。

    $(function(){
           var _firste=0;
               $(".userImg").click(function(){
                if ((document.all && document.addEventListener && !window.atob)||(document.all && document.querySelector && !document.addEventListener)) {
                    alert("你当前浏览器版本较低暂时无法支撑上传头像,请您更新浏览器再试")
                }else {
                    $(".up_imgdlag").show();
                    $(".up_imgdlag_box").show();
                    if (!_firste) {
                        //点击确认上传
                        _firste = 1;
                        var _croppedImg = null;
                        QstImageCropper.init({//初始化裁剪组件
                            imgDom: "#crop_image",
                            autoCropArea: 0.6,
                            maxWidth: 240,
                            maxHeight: 240,
                            preview: "#up_virew"
                        });
                        $(document).on("change", "#up_imgs_btn", function () {//替换图片
                            QstImageCropper.replace(this.files[0])
                        })
                        $(document).on("click", "#up_save_btn", function () {//裁剪并隐藏裁剪框
                            _croppedImg = QstImageCropper.getCroppedData(function (blob) {
                                var formData = new FormData();
                                formData.append("image", blob);
                                $.ajax({
                                    url: url_get("Api/imgupload"),
                                    type: 'POST',
                                    data: formData,
                                    async: false,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success: function (result) {
                                        //console.log(result)
                                        _firste = 0;
                                        var result = JSON.parse(result);
                                        $('.userImg>img').attr('src', result.url);
                                        $(".up_imgdlag").hide();
                                        $(".up_imgdlag_box").hide();
                                    },
                                    error: function (result) {
                                        console.error(result)
                                    }
                                });
                            })
        
                        })
        
                    }
                }
            });
            cache设置为false,上传文件不需要缓存。
        //关闭上传头像弹出框
        $('.cancel_btn').click(function() {
            $(".up_imgdlag").hide();
            $(".up_imgdlag_box").hide();
        });
       })

看一些效果图

可以裁剪头像哦!裁剪头像使用的是Cropper。参考链接https://github.com/fengyuanchen/cropper

上传头像查看链接 http://sandbox.runjs.cn/show/o2fcur2g如果想要源码的话,加入群找我要哈!!!

总结: 

      头像上传与图片上传主要是你的设计思路。目前来看,头像上传裁剪方式两种,上边我说的那种,还有就是上传图片的位置坐标告诉后台,后台进行剪切处理,这种方式兼容性最好。如有疑问欢迎大家指正。如需转载请说明出处!!

 

文件上传-------头像上传预览

这次来讲怎么来用代码完成头像更换在上篇博客中也说了图片上传,但选择文件的之后,在网页上并没有显示这张图片,如果是要做头像的话,最好有头像预览就像平时我们换QQ头像那样,一点图片就会出来文件预览,然后再选... 查看详情

微信上传头像失败怎么办

...解决:1上传的头像格式不符合微信头像的要求,可以将图片格式更改为微信默认的格式。2头像照片过大,要进行适当的裁剪,适合头像的尺寸要求即可。3网络不稳定,上传的时候,网络断断续续,不能将头像顺利上传。4可以... 查看详情

django头像上传预览功能(代码片段)

...有头像按钮,头像需求有默认的头像点击头像就可以上传图片上传图片后可以预览生成默认的头像上传默认图片到指定文件夹,然后把img标签的src指定到这里就可以,点击头像上传图片默认添加了&lt;inputtype="file"&gt;后会在... 查看详情

材质UI头像图片上传

】材质UI头像图片上传【英文标题】:MaterialUIAvatarImageUpload【发布时间】:2021-11-1012:16:21【问题描述】:我设法制作了头像选择器,但我不知道如何在Firebase中保存图片,甚至不知道如何将其保存为个人资料图片。看起来是这样... 查看详情

eggjs怎么实现上传图片(头像)接口功能?

...意的问题。这里顺便说一下,注册的时候去掉默认的图片头像了,还有默认的签名。图片上传到服务器的逻辑首先前端调用上传接口,将上传的资源经过FormData实例封装之后,传给服务端在服务端接收前端传进来... 查看详情

android实现本地上传图片并设置为圆形头像

我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ。用户在用QQ更换头像的时候,上传的图片都是矩形的,但显示的时候确是圆形的。那么这是如何实现的呢,下面我们就来探讨下吧。先从本地把图片上传到服务器... 查看详情

Codeigniter 替换上传的图片

】Codeigniter替换上传的图片【英文标题】:Codeigniterreplaceuploadedimage【发布时间】:2012-07-0711:36:46【问题描述】:我正在使用Codeigniter的FileUploadingClass上传用户头像。每当他/她上传新的图像文件时,有没有办法替换用户的图像文件... 查看详情

图片(头像)或文件上传

用于记录以供下次快速查阅$(‘#fileImage‘).change(function(e){e.stopPropagation();e.preventDefault();varfiles=this.files;varimgSrc;if(files.length){if(files[0].type.indexOf("image")==0){if(files[0].size>=512000){ 查看详情

qq上传不了头像老是显示上传失败

我的QQ26级了.上传图片老是上传失败.图片是闪图.我以前上传过都好使.后来不显示了.我想从上传一下.试了两天了还是不行.我把图片换成静态的也不行.请高手指点一下.谢谢~~!!!!新发现...显示上传失败.但是在别人的QQ里还能... 查看详情

ActivityResultLauncher 用于上传头像

...2022-01-0523:11:38【问题描述】:我想从手机图库中挑选一张图片作为用户的个人资料图片上传到应用中。我想获取它的URI,以便将其存储在用户数据库中。activityResultLauncher=registerForActivityResult 查看详情

上传头像

<divclass="commodityImg_evaluate"> <divclass="ge_pic_icon_Infor"> <imgonclick="getElementById(‘file‘).click()"title="点击添加图片"alt="点击添加图片"src="images/tianjia.png"> </div> 查看详情

uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片+头像图片原地覆盖上传示例(代码片段)

效果图uni-file-picker显示之前已上传的图片 头像图片原地覆盖上传(不显示删除按钮) 完整代码uni-file-picker显示之前已上传的图片<uni-file-pickerlimit="9":autoUpload="false"mode="grid"file-mediatype 查看详情

uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片+头像图片原地覆盖上传示例(代码片段)

效果图uni-file-picker显示之前已上传的图片 头像图片原地覆盖上传(不显示删除按钮) 完整代码uni-file-picker显示之前已上传的图片<uni-file-pickerlimit="9":autoUpload="false"mode="grid"file-mediatype 查看详情

wex5教程之图文讲解头像裁剪与上传

....com/v_show/id_XMTgyMDE5NjEyOA==.html一效果演示1.点击头像,弹出图片裁剪框2,选择图片,裁剪,上传3.上传成功后,头像图标更改二案例解读案例目录wex5为我们提供了一个picut图片裁剪案例,如下:组件部局 加入file标签用来打开... 查看详情

javaweb实现上传头像功能,

...一个外网地址,每次访问的其实是其中的一台主机当上传图片时需要将本地的图片同时上传到其他的主机上,这个我知道怎么实现我用的是FTPclient类。现在的问题是在服务器上当我想把文件转换成文件流时newFile(path)时不能识别... 查看详情

码蹄集-mt2073-上传头像(代码片段)

...,每个头像必须是正方形,并且长宽至少为L×L在图片上传前,系统会对图片进行如下处理 查看详情

头像上传二三事

...巴:完善图像上传功能。之前只是简单的input上传,没有图片做任何处理。   以下说的就是如何将图片进行裁剪得到需要的尺寸并上传。(参考文献:http://www.open-open.com/lib/view/open1464825507226.html)   并将这... 查看详情

用户上传本地磁盘中的一个图片文件作为头像

<script type="text/javascript">      //图片上传预览    IE是用了滤镜。        function previewIma 查看详情