這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現圖片上傳+裁剪+預覽的代碼，非常的簡單實用，效果也很棒，有需要的小伙伴可以參考下。
網頁端 裁剪圖片，不需要經過服務器。
這個是用 https://github.com/mailru/FileAPI 框架實現的。配合jcrop.
高級浏覽器 使用 canvas 裁剪，ie6 7 8使用 flash過度。
核心代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 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); } }); }); } }); }); });完整代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 <!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>以上所述就是本文的全部內容了，希望大家能夠喜歡。