画像プレビューの切り抜きアップロード方法
先日、互換性の良い画像アップロード機能を作りたいと思って、多くのネット上のコードを参考にして、まずswfを使う案を否定しました.携帯電話側では実現できないからです.トリミングをプレビューするため、まず元の図をサーバーにアップロードし、トリミングをプレビューする案も多く、ユーザー体験が悪く、ユーザーが長い間待つ可能性があります.模索を経て、私は1段のコードを書いて機能を実現して、先にプレビューして、更に裁断して、最後にアップロードして、指導を求めます.画像トリミングプラグインJcrop、HTML 5ファイルオブジェクトを使用しました.皆さん、もっと良い案があれば、携帯ブラウザと互換性がありますので、教えてください.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" name="viewport" >
<link rel="stylesheet" type="text/css" href="__CSS__/jquery.Jcrop.min.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/upload.css" />
<script type="text/javascript" src="__JS__/jquery.js"></script>
<script type="text/javascript" src="__JS__/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
</head>
<body>
<input type="hidden" id='img_src'/>
<div class="main">
<form id="pic_form" class="update-pic cf" enctype="multipart/form-data" method="post" action="">
<div class="upload-area">
<input type="file" id="user-pic" name="user-pic" />
<div class="file-tips"> JPG,PNG,JPEG, 1MB， 100*100！</div>
<div class="preview hidden" id="preview-hidden"></div>
</div>
<div class="preview-area">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="button" class="uppic-btn save-pic" value=" " />
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
//
$("#user-pic").change(function () {
//
var oFile = this.files[0];
var fileName = oFile.name;
var fileType = oFile.type;
// Android type ，
if(!fileType){
fileType = "image/" + fileName.split(".").pop().toLowerCase();
}
//
var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/;
if (!rFilter.test(fileType)) {
alert(' jpg、jpeg png ');
return;
}
//
if(oFile.size > 1024*1024){
alert(' 1M ');
return;
}
var preview = $('.upload-area').children('#preview-hidden');
preview.show().removeClass('hidden');
var img = $('<img id="cropbox" />');
preview.append(img);
var oImage = document.getElementById('cropbox');
var oReader = new FileReader();
oReader.readAsDataURL(oFile);
oReader.onload = function(e){
oImage.src = e.target.result;
//
oImage.onload = function(){
var img_height = 0;
var img_width = 0;
var real_height = oImage.height;
var real_width = oImage.width;
if(real_height >= real_width && real_height > 300){
var persent = real_height / 300;
real_height = 300;
real_width = real_width / persent;
}else if(real_width > real_height && real_width > 300){
var persent = real_width / 300;
real_width = 300;
real_height = real_height / persent;
}
if(real_height < 300){
img_height = (300 - real_height)/2;
}
if(real_width < 300){
img_width = (300 - real_width)/2;
}
var pic_w = (300-img_width)+'px';
var pic_h = (300-img_height)+'px';
var p_t = img_height+'px';
var p_l = img_width+'px';
preview.children('img').css({width:pic_w,height:pic_h});
preview.css({paddingTop:p_t,paddingLeft:p_l});
}
}
$('#cropbox').Jcrop({
bgColor:'#333', //
bgFade:true, //
fadeTime:1000, //
allowSelect:false, // ，
allowResize:true, //
aspectRatio: 1, //
minSize : [100,100],//
boxWidth : 300, //
boxHeight : 300, //
setSelect:[ 100, 100, 200, 200],//
onSelect: function (c){ // ， ！
$('#x').val(c.x);// X
$('#y').val(c.y);// Y
$('#w').val(c.w);//
$('#h').val(c.h);//
}
});
});
$('.save-pic').click(function(){
if($('#preview-hidden').html() == ''){
alert(' ！');
}else{
var formData = new FormData($("#pic_form")[0]);
$.ajax({
url : '__URL__/uploadImg',//
type : 'post',
data : formData,
contentType : false,// false Content-Type
processData : false,// false jQ formdata ,XMLHttpRequest
success:function(ret){
if (ret.status==1){
//
$("#img_src").val(ret.data);
//
}else{
alert('error');
}
}
});
}
});
});
</script>
</body>
</html>