图片上传是许多网站的一个常用的功能，有时需要对上传的图片做初步的选择裁剪，比如上传头像。下面就是一个使用HTML5 jQuery实现的图片上传裁剪特效，可以对选择要上传的图片做缩小、放大、拖动和裁剪，由何问起调试改进，有需要的朋友可以参考一下。在文后附有源码下载。

效果图：

需要引用的钢性铸铁文件为style.css，需要引用的射流研究…文件为jquery文件，可以到http://hovertree.com/h/bjaf/ati6k7yk.htm选择合适的版本下载，还需引用cropbox.js文件，这些文件在源码里面都有。

代码如下：

！DOCTYPE html html lang=' zh ' hearta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0'titlejQuery拖动剪裁图片作为头像代码-何问起/titlelink rel='样式表href=' CSS/style。CSS ' type=' text/CSS '/headdydiv class=' hover tree container ' div class=' imageBox ' div class=' thumbBox '/div class=' spinner ' style=' display : none '正在加载./div/div class=' action ' div class=' new-content area TC ' a href=' JavaScript : void(0)' class=' upload-img '标签为=“上传文件”上传图像/label /a输入类型=' file ' class=' name=' upload-file ' id=' upload-file '/div输入类型=' button ' id=' btnCrop ' class=' Btnsty _ peyton ' value='裁切输入类型=' button ' id=' btnzomin ' class=' Btnsty _ peyton ' value=输入类型=' button ' id=' btnzomut ' class=' Btnsty _ peyton ' value='-'/div class=' cropped '/div/div脚本src=' http :http://down。 气垫树。com/jquery/jquery-1。11 .0 .量滴js ' type=' text/JavaScript '/script script type=' text load(function(){ var options={ thumbbox : } ' .拇指盒，旋转器： '。spinner '，imgsrc : ' img/rge VO2 ea。jpg ' } var cropper=$(' .imageBox ').cropbox(期权);$(' #上传文件').on('change '，function(){ var reader=new FileReader()；读者。onload=function(e){ options。imgsrc=e . target。结果；cropper=$(' .imageBox ').cropbox(期权);}读者。readasdataurl(这。文件[0])；这个。文件=[]；}) $('#btnCrop ').on('click '，function(){ var img=cropper。getdata URL()；$('.裁剪的")。html(" ")；$('.裁剪的")。追加(' img src=' http : ' img ' ' align=' ABS middle ' style=' width :64 px；页边距-top :4 px；边界半径：64 px箱形阴影：0 px 0px 12px # 7e 7e 7 e；p64px * 64px/p '；$('.裁剪的")。追加(' img src=' http : ' img ' ' align=' ABS middle ' style=' width :128 px；页边距-top :4 px；边界半径：128 px箱形阴影：0 px 0px 12px # 7e 7e 7 e；p 128 px * 128 px/p '；$('.裁剪的")。追加(' img src=' http : ' img ' ' align=' ABS middle ' style=' width :180 px；页边距-top :4 px；边界半径：180像素；箱形阴影：0 px 0px 12px # 7e 7e 7 e；p 180 px * 180 px/p’；})$(' # btnzomin ').on('click '，function(){ cropper。zoomin()；})$(' # btnzomut ').on('click '，function(){ cropper。zoom TT()；})});/script div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；p适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。不支持IE8及以下浏览器/pp。来源：a href=' http://悬停树。com/' target=' _ blank '何问起/a a href=' http://悬停树。com/h/bjaf/7x8ev 3 FH。htm ' target=' _ blank '说明/a/p/div/body/html源码下载：http://wd。JB 51。净额：81//201612/马援/hovertreejqimg8_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！