码迷,mamicode.com
首页 > Web开发 > 详细

图片上传,头像上传

时间:2017-08-13 16:16:25      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:隐藏   file   cli   parse   roc   load   view   tps   前端   

简介

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

分析

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

总结: 

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

 

图片上传,头像上传

标签:隐藏   file   cli   parse   roc   load   view   tps   前端   

原文地址:http://www.cnblogs.com/xiaoxiaokun/p/7341442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!