Image upload, Avatar Upload

Brief introduction

In the normal front-end development, image upload and avatar upload is Essential. Below I have uploaded the Avatar to do a small example, I hope you can use. The code was written a year ago, for the novice veteran, a look is Understood. If you want to encapsulate the good can add group to find I want to oh!

Analysis

Upload images, We need we can choose Form form upload, or Ajax upload, This article is mainly about the Ajax simulation form form upload Image. See section Code Analysis.

 varFormData =NewFormData (); Formdata.append ("image", blob); $.ajax ({url:url_get ("api/imgupload"),//get The absolute path type:' POST ', data:formdata, async:false,//sync cache:false,//cache is set to False and the upload file does not need to be cached. ContentType:false,//contenttype is set to False.          This is set to false because it is a Formdata object constructed by the <form> form, and the attribute enctype= "multipart/form-data" has been declared. Processdata:false,//processdata is set to False.          Because the data value is a formdata object, you do not need to do the Processing. Success:function(result) {//Console.log (result)_firste = 0; varresult =Json.parse (result); $('. userimg>img '). attr (' src '), result.url); $(". up_imgdlag"). Hide (); $(". up_imgdlag_box"). Hide (); }, error:function(result) {console.error (result)}});

This is the code in the Ajax simulation form upload Image. No cropping is required for uploading images. below to see some avatar upload code. For now, I use HTML5 's Fileapi and canvas, so I only support Chrome,firefox and ie10.

$(function(){           var_firste=0; $(". userimg"). Click (function(){                if((document.all && Document.addeventlistener &&!window.atob) | | (document.all && Document.queryselector &&!)document.addeventlistener) {alert ("your current browser version is lower temporarily unable to support upload avatar, please update your browser and try again")                }Else {                    $(". up_imgdlag"). Show (); $(". up_imgdlag_box"). Show (); if(!_firste) {                        //Click Confirm Upload_firste = 1; var_croppedimg =NULL; Qstimagecropper.init ({//initializing the cropping componentImgdom: "#crop_image", Autocroparea:0.6, MaxWidth:240, Maxheight:240, Preview:"#up_virew"                        }); $ (document). On ("change", "#up_imgs_btn",function() {//Replace pictureQstimagecropper.replace ( this. files[0])}) $ (document). on ("click", "#up_save_btn",function() {//crop and hide the crop box_croppedimg = Qstimagecropper.getcroppeddata (function(blob) {varFormData =NewFormData (); 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; varresult =Json.parse (result); $('. userimg>img '). attr (' src '), result.url); $(". up_imgdlag"). Hide (); $(". up_imgdlag_box"). Hide (); }, error:function(result) {console.error (result)}                            });            })                                })                            }                }            });        The cache is set to False and the upload file does not need to be cached. //Close the Upload avatar pop-up box$ ('. cancel_btn '). Click (function() {            $(". up_imgdlag"). Hide (); $(". up_imgdlag_box"). Hide ();       }); })

See some

You can crop your avatar! The clip avatar uses cropper. Reference link Https://github.com/fengyuanchen/cropper

Upload Avatar View link http://sandbox.runjs.cn/show/o2fcur2g If you want to source, join the group to find me to ha!!!

Summarize:

Avatar upload and image upload master if your design Ideas. At present, the Avatar upload cutting way two, above I said the kind, there is the location of the upload image to tell the background, the background for cutting processing, this way compatibility is Best. If you have any questions, please correct Me. If you want to reprint please indicate the source!!

Image upload, Avatar Upload