jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
网页端 裁剪图片,不需要经过服务器。
这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop.
高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度。
核心代码:
var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.on(el, 'change', function (evt){ var files = FileAPI.getFiles(evt); // Retrieve file list FileAPI.filterFiles(files, function (file, info){ if( !/^image/.test(file.type) ){ alert('图片格式不正确'); return false; } else if(file.size > 20 * FileAPI.MB){ alert('图片必须小于20M'); return false; } else{ return true; } }, function (files, rejected){ console.log(files); if( files.length ){ var file = files[0]; var img0 = FileAPI.Image(file); var img1 = FileAPI.Image(file); var ratio = 0; FileAPI.getInfo(file, function (err, info) { //get image ratio if (!err) { if (info.width > info.height) { ratio = info.width / 500; } else { ratio = info.height / 500; } } }); img0.resize(500, 500, 'max') //place image and register jcrop .get(function(err, img) { $('#img2').empty(); $('#img2').append($(img)); $('#img2').children().Jcrop({ aspectRatio: 1, bgColor: 'rgba(0,0,0,0.4)', onSelect: function(c) { img1.matrix.sx = c.x * ratio; img1.matrix.sy = c.y * ratio; img1.matrix.sw = c.w * ratio; img1.matrix.sh = c.h * ratio; img1.matrix.dw = 500; img1.matrix.dh = 500; img1.get(function(err, img) { // $('#img3').empty(); // $('#img3').append($(img)); $('#img3').html($(img)); }); } }); }); $('#btn').on('click',function(){ FileAPI.upload({ // url: '/testUpFile/upFile', // headers: { 'Content-Type': 'multipart/form-data' }, files: { images: img1 }, progress: function (evt){ /* ... */ }, complete: function (err, xhr){ /* ... */ //alert(xhr.responseText); console.log(xhr); } }); }); } }); }); });
完整代码:
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="./jquery.min.js"></script> <script src="./jcrop/jquery.Jcrop.min.js"></script> <link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet"> </head> <style> .upload-btn { width: 130px; height: 25px; overflow: hidden; position: relative; border: 3px solid #06c; border-radius: 5px; background: #0cf; } .upload-btn:hover { background: #09f; } .upload-btn__txt { z-index: 1; position: relative; color: #fff; font-size: 18px; font-family: "Helvetica Neue"; line-height: 24px; text-align: center; text-shadow: 0 1px 1px #000; } .upload-btn input { top: -10px; right: -40px; z-index: 2; position: absolute; cursor: pointer; opacity: 0; filter: alpha(opacity=0); font-size: 50px; } </style> <body> <div> <!-- "js-fileapi-wrapper" -- required class --> <div class="js-fileapi-wrapper upload-btn" id="choose"> <input name="files" type="file" multiple /> <button id="btn">上传</button> </div> <div id="images"> <p style="margin-top: 40px;"></p> <div id="img2" ></div> <div id="img3"></div> </div> </div> <script>window.FileAPI = { staticPath: './fileapi/' };</script> <script src="./fileapi/FileAPI.min.js"></script> <script> var el = $('input').get(0); FileAPI.event.on(el, 'change', function (evt){ var files = FileAPI.getFiles(evt); // Retrieve file list FileAPI.filterFiles(files, function (file, info){ if( !/^image/.test(file.type) ){ alert('图片格式不正确'); return false; } else if(file.size > 20 * FileAPI.MB){ alert('图片必须小于20M'); return false; } else{ return true; } }, function (files, rejected){ if( files.length ){ var file = files[0]; var img0 = FileAPI.Image(file); var img1 = FileAPI.Image(file); var ratio = 0; FileAPI.getInfo(file, function (err, info) { //get image ratio if (!err) { if (info.width > info.height) { ratio = info.width / 500; } else { ratio = info.height / 500; } } }); img0.resize(500, 500, 'max') //place image and register jcrop .get(function(err, img) { $('#img2').empty(); $('#img2').append($(img)); $('#img2').children().Jcrop({ aspectRatio: 1, bgColor: 'rgba(0,0,0,0.4)', onSelect: function(c) { img1.matrix.sx = c.x * ratio; img1.matrix.sy = c.y * ratio; img1.matrix.sw = c.w * ratio; img1.matrix.sh = c.h * ratio; img1.matrix.dw = 500; img1.matrix.dh = 500; img1.get(function(err, img) { // $('#img3').empty(); // $('#img3').append($(img)); $('#img3').html($(img)); }); } }); }); $('#btn').on('click',function(){ FileAPI.upload({ url: '/testUpFile/upFile', files: { images: img1 }, progress: function (evt){ /* ... */ }, complete: function (err, xhr){ /* ... */ //alert(xhr.responseText); } }); }); } }); }); </script> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关推荐
ParadiserD 2017-02-07
快乐就好 2017-02-07
zhangyang0 2016-07-28
yingzhicai 2016-06-14
会写code的凳子哥 2014-08-18
JeWangZhe 2014-02-18
msyndra 2012-09-09
88403369 2016-01-22
81971235 2013-11-20
CeiWCJ 2011-11-23
smithdoudou 2011-10-19
87407607 2009-05-26
草莓酱 2009-05-21
PHP100 2019-03-27