圖片上傳,頭像上傳
阿新 • • 發佈:2017-08-13
repl cnblogs $.ajax maxwidth 僅支持 .sh span attr 瀏覽器
簡介
在平時前端開發中,圖片上傳與頭像上傳是必不可少的。下邊我把上傳頭像做了一個小的例子,希望大家能夠使用。代碼是一年前寫的,對於新手老手來說,一看即懂。如果想要封裝好的可以加群找我要哦!
分析
上傳圖片,我們需要我們可以選擇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如果想要源碼的話,加入群找我要哈!!!
總結:
頭像上傳與圖片上傳主要是你的設計思路。目前來看,頭像上傳裁剪方式兩種,上邊我說的那種,還有就是上傳圖片的位置坐標告訴後臺,後臺進行剪切處理,這種方式兼容性最好。如有疑問歡迎大家指正。如需轉載請說明出處!!
圖片上傳,頭像上傳