簡介

在平時前端開發中，圖片上傳與頭像上傳是必不可少的。下邊我把上傳頭像做了一個小的例子，希望大家能夠使用。代碼是一年前寫的，對於新手老手來說，一看即懂。如果想要封裝好的可以加群找我要哦！

分析

上傳圖片，我們需要我們可以選擇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如果想要源碼的話，加入群找我要哈！！！

總結：

頭像上傳與圖片上傳主要是你的設計思路。目前來看，頭像上傳裁剪方式兩種，上邊我說的那種，還有就是上傳圖片的位置坐標告訴後臺，後臺進行剪切處理，這種方式兼容性最好。如有疑問歡迎大家指正。如需轉載請說明出處！！

圖片上傳，頭像上傳