图片上传,头像上传

Posted 小小坤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传,头像上传相关的知识,希望对你有一定的参考价值。

简介

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

分析

    上传图片,我们需要我们可以选择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如果想要源码的话,加入群找我要哈!!!

总结: 

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

 

以上是关于图片上传,头像上传的主要内容,如果未能解决你的问题,请参考以下文章

材质UI头像图片上传

SpringBoot + Vue 前后端分离(用户信息更新&头像上传&Markdown图片上传)

java web实现上传头像功能,

相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

微信换头像显示上传失败怎么办

vue中使用axios post上传头像/图片并实时显示到页面