jfinal头像裁剪上传服务器
Posted 淡淡人生过
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jfinal头像裁剪上传服务器相关的知识，希望对你有一定的参考价值。
前端页面完整代码，复制可用，记得导入库文件
<!DOCTYPE html> <html lang="en"> <head> <title>Aspect Ratio with Preview Pane | Jcrop Demo</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <script src="/Jcrop-0.9.12/js/jquery.min.js"></script> <script src="/Jcrop-0.9.12/js/jquery.Jcrop.js"></script> <script src="/Jcrop-0.9.12/js/imgCropUpload.js"></script> <link rel="stylesheet" href="/Jcrop-0.9.12/css/jquery.Jcrop.css" type="text/css" /> <style type="text/css"> body { font-size: 16px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .crop-picker-wrap { position: relative; width: 100px; height: 30px; overflow: hidden; } .crop-picker { width: 100%; height: 100%; line-height: 1; -webkit-appearance: none; margin: 0; border: none; border-radius: 5px; padding: 9px 0; background-color: #1ab2ff; color: #fff; cursor: pointer; } .crop-picker-file { position: absolute; top: 0; right: 0; height: 100%; opacity: 0; cursor: pointer; filter: alpha(opacity = 0); } .crop-wrapper { display: inline-block; min-width: 750px; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px 2px #ccc; } .crop-container { font-size: 0; } .crop-container img[src=""] { visibility: hidden; } .crop-area-wrapper, .crop-preview-wrapper { display: inline-block; vertical-align: top; } .crop-area-wrapper { width: 500px; height: 400px; } .crop-preview-wrapper { width: 200px; height: 200px; margin-left: 28px; overflow: hidden; } .crop-preview-container { position: relative; overflow: hidden; } .crop-operate { text-align: center; margin: 10px 0; } .crop-save, .crop-cancel { display: inline-block; vertical-align: middle; width: 150px; height: 50px; line-height: 50px; -webkit-appearance: none; margin: 0 5px; border: none; border-radius: 5px; background-color: #1ab2ff; color: #fff; cursor: pointer; } #uploadIfr { display: none; } .crop-picker-wrap { position: relative; width: 100px; height: 30px; overflow: hidden; margin-top: 10px; } </style> </head> <body> <form id="coords" class="coords" onsubmit="return false;" action=""> <div class="inline-labels"> <label>X1 <input type="text" size="4" id="x1" name="x1" /></label> <label>Y1 <input type="text" size="4" id="y1" name="y1" /> </label> <label>X2 <input type="text" size="4" id="x2" name="x2" /></label> <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> <label>W <input type="text" size="4" id="w" name="w" /> </label> <label>H <input type="text" size="4" id="h" name="h" /></label> </div> </form> <div id="TCrop"></div> <button id="btn">上传头像</button> <script type="text/javascript"> $(function() { Crop.init({ id: \'TCrop\', /* 上传路径 */ url: \'\', /* 允许上传的图片的后缀 */ allowsuf: [\'jpg\', \'jpeg\', \'png\', \'gif\'], /* JCrop参数设置 */ cropParam: { minSize: [100, 100], // 选框最小尺寸 maxSize: [300, 300], // 选框最大尺寸 allowSelect: true, // 允许新选框 allowMove: true, // 允许选框移动 allowResize: true, // 允许选框缩放 dragEdges: true, // 允许拖动边框 onChange: function(c) { $(\'#x1\').val(c.x); $(\'#y1\').val(c.y); $(\'#x2\').val(c.x2); $(\'#y2\').val(c.y2); $(\'#w\').val(c.w); $(\'#h\').val(c.h); }, // 选框改变时的事件，参数c={x, y, x1, y1, w, h} onSelect: function(c) { $(\'#x1\').val(c.x); $(\'#y1\').val(c.y); $(\'#x2\').val(c.x2); $(\'#y2\').val(c.y2); $(\'#w\').val(c.w); $(\'#h\').val(c.h); } // 选框选定时的事件，参数c={x, y, x1, y1, w, h} }, /* 是否进行裁剪，不裁剪则按原图上传，默认进行裁剪 */ isCrop: true, /* 图片上传完成之后的回调，无论是否成功上传 */ onComplete: function(data) { console.log(\'upload complete!\'); } }); }); /* 上传头像 */ $(function(){ $("#btn").click(function(){ var form = document.getElementById("coords");//获取到form表单 var formData = new FormData(form);//创建一个formData对象,将表单中的数据放进去 //for(var i=0; i<$(\'#file\')[0].files.length;i++){//使用for循环将选择的文件一个一个添加(append)到formData对象中 formData.append(\'img0\', $(\'#file\')[0].files[0]);//注意:如果你使用的是jfinal框架这里的key(img)必须是不同的,如果相同的话文件能上传但是拿上传文件名的时候只能拿到一个 //} var x1 = $(\'#x1\').val(), x2 = $(\'#x2\').val(), y1 = $(\'#y1\').val(), y2 = $(\'#y2\').val(); formData.append(\'x11\',x1 ); formData.append(\'y11\',y1 ); formData.append(\'x22\',x2 ); formData.append(\'y22\',y2 ); formData.append(\'tw\',$(".jcrop-holder"以上是关于jfinal头像裁剪上传服务器的主要内容，如果未能解决你的问题，请参考以下文章