jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
更新時間：2015年04月22日 12:19:54 投稿：hebedich
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼，非常的簡單實用，效果也很棒，有需要的小伙伴可以參考下。
網(wǎng)頁端 裁剪圖片，不需要經(jīng)過服務(wù)器。
這個是用 https://github.com/mailru/FileAPI 框架實現(xiàn)的。配合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>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)遍歷復(fù)選框的方法,結(jié)合實例形式分析了jQuery針對表單復(fù)選框元素的遍歷與字符串操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery后代選擇器用法,以設(shè)置文本顏色的實例分析了后代選擇器的應(yīng)用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jquery獲取節(jié)點名稱的相關(guān)資料,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery插件擴展操作,結(jié)合簡單實例形式分析了jQuery擴展方法的定義與使用技巧,非常簡單易懂,需要的朋友可以參考下2017-01-01
jQuery UI是一套非常好用的jQuery Tools庫，目前已經(jīng)發(fā)布的最新版本是1.8.4。在我自己的使用過程中，總有一些不爽。因為我下載的那個包里默認的主題樣式是下圖這樣的，使用起來很難和具體的網(wǎng)頁風(fēng)格去配合。2010-09-09
這篇文章主要為大家詳細介紹了利用jquery實現(xiàn)瀑布流2種案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery.ajax傳遞參數(shù)的方法2008-11-11
瀏覽器端跨域訪問一直是個問題, 多數(shù)研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.2009-12-12
jQuery提供css()的方法來實現(xiàn)嵌入式改變元素樣式，css()方法在使用上具有多樣性。2010-02-02
JQuery使用index方法獲取Jquery對象數(shù)組下標的方法
這篇文章主要介紹了JQuery使用index方法獲取Jquery對象數(shù)組下標的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下2015-05-05