圖片上傳，頭像上傳

標籤：隱藏   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如果想要源碼的話，加入群找我要哈！！！

總結： 

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

 

圖片上傳，頭像上傳