实现图片上传及图片裁剪功能,时间比较仓促,目前只允许单图片有裁剪功能,其中图片裁剪用到了imgareaselect插件,其实前端是伪裁剪,将裁减坐标传递给后台处理,需后台配合,备份一下代码
插件下载地址:http://download.csdn.net/download/jylonger/10141917
/**
* Created by lgy on 2017/11/25.
* 图片上传插件
*/
(function ($) {
$.fn.esupload = function (options) {
//初始化参数
var defaults = {
maxfilenum: 8,
nowfilenum: 0,
uploadurl: "", //上传图片路径
cuturl:"", //需裁剪的图片地址
mid:"",
cutshow:false,
width:80,
minheight:"",
imgSize:500, //以k为单位
height:"",
uploadimgurls: [],
showallbtn: true
};
var opts = $.extend(defaults, options);
return this.each(function () {
var $this = $(this);//获取当前对象
var html = '';
if (opts.showallbtn) {
html += '<div class="btn-upload"><span>批量上传</span><input type="file" class="btn-upload-input" name="allpic" multiple="' + opts.maxfilenum + '" ></div>' +
'<span> 最多允许上传' + opts.maxfilenum + '张图片</span><br><br>';
}
html += '<div style="clear: both;">';
if(opts.mid!=""){
if(opts.uploadimgurls.length>0){
var imgurls="";
for(var i=0;i<opts.uploadimgurls.length;i++){
imgurls+=opts.uploadimgurls[i]+",";
}
imgurls=imgurls.substring(0,imgurls.length-1);
html +='<input id='+opts.mid+' name="'+opts.mid+'" class="upload_img_name" type="hidden" value="'+imgurls+'">';
}else{
html +='<input id='+opts.mid+' name="'+opts.mid+'" class="upload_img_name" type="hidden">';
}
}else{
if(opts.uploadimgurls.length>0){
var imgurls="";
for(var i=0;i<opts.uploadimgurls.length;i++){
imgurls+=opts.uploadimgurls[i]+",";
}
imgurls=imgurls.substring(0,imgurls.length-1);
html +='<input name="upload_img_name" class="upload_img_name" type="hidden" value="'+imgurls+'">';
}else{
html +='<input name="upload_img_name" class="upload_img_name" type="hidden">';
}
}
html +='<div class="show-upload">' +
'<div class="s-up-div">';
if (opts.uploadimgurls.length > 0) {
opts.nowfilenum = opts.uploadimgurls.length;
$.each(opts.uploadimgurls, function (i, s) {
html += '<div class="s-up-wcon"><div class="s-up-k">' +
'<p class="s-up-img"><img src="' + s + '" width="100%"></p>' +
'</div>'+
'<span class="s-up-close"></span>' +
'<div class="s-cut-pic">裁剪图片</div></div>';
});
}
html += '</div>';
if (opts.uploadimgurls.length > 0 && opts.uploadimgurls.length>=opts.maxfilenum) {
console.log("隐藏添加按钮");
html +='<div class="s-up-wcon s-up-add" style="display:none;"><div class="s-up-k2">' +
'<span class="s-add-img"></span>' +
'<input type="file" class="btn-upload-input" name="imgFile" >' +
'</div></div>';
}else{
html +='<div class="s-up-wcon s-up-add"><div class="s-up-k2">' +
'<span class="s-add-img"></span>' +
'<input type="file" class="btn-upload-input" name="imgFile" >' +
'</div></div>';
}
html +='</div></div>';
//加载图片截图功能html
if(opts.cutshow){
html+='<div class="imgAreaDiv">'+
'<div class="img-area-mask"></div><div class="img-area-k">' +
'<div class="img-area-title">' +
'<span>图片裁剪</span>' +
'<span class="img-area-close">X</span>' +
'</div>' +
'<div class="img-area-con">' +
'<div class="img-area-ys">' +
'<img class="img-before-photo-ys" style="display:none;"><img class="img-before-photo" src="">' +
'</div>' +
'<div class="img-area-cj">' +
'<div class="img-cj-txt">裁剪后图片预览</div>' +
'<div class="img-cj-con">' +
'<div class="img-after-photo img-cj-pic">' +
'<img src="">' +
'</div></div>' +
'</div></div>' +
'<div class="img-area-footer">' +
'<button type="button" class="img-area-pic">上传截图</button>' +
'</div></div></div>';
}
$this.html(html);
if(opts.height=="auto"){
$this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:"auto"});
}else{
$this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:opts.width+"px"});
}
if(opts.minheight!=""){
$this.find(".s-up-k2").css({width:opts.minheight+"px",height:opts.minheight+"px"});
}
//删除事件
delpic();
//监听批量上传事件
$(this).find('input[name="allpic"]').on('change', function () {
if (typeof this.files == 'undefined') {
return;
}
$.each(this.files, function (i, f) {
pulicupload(f);
});
});
//监听单图片上传事件
$(this).find('input[name="imgFile"]').on('change', function () {
if (typeof this.files == 'undefined') {
return;
}
pulicupload(this.files[0]);
$(this).val("");
});
//上传图片公用方法
function pulicupload(file) {
if (opts.nowfilenum > opts.maxfilenum - 1) {
$this.find(".s-up-add").hide();
alert("最多只能上传" + opts.maxfilenum + "张图片");
return;
}
var img = file;//获取图片信息
//console.log(img.size);
if((img.size/1024)>opts.imgSize){
alert("上传图片不能大于" + opts.imgSize + "kb");
return;
}
//var imgtype = img.type;//获取图片类型,判断使用
var url = getObjectURL(file);//使用自定义函数,获取图片本地url
var fd = new FormData();//实例化表单,提交数据使用
fd.append('imgFile', img);//将img追加进去
fd.append('fileName', img.name);
var imghtml = '<div class="s-up-wcon"><div class="s-up-k"><div class="s-up-loading"><span class="s-load-tb"></span></div>' +
'<p class="s-up-img"><img src="' + url + '" width="100%"></p>' +
'</div>'+
'<span class="s-up-close"></span>' +
'<div class="s-cut-pic">裁剪图片</div></div>';
$this.find(".s-up-div").append(imghtml);
//打开截图窗口
$this.find(".s-cut-pic").unbind('click').click(function(){
$this.find(".img-cj-pic img").removeAttr("style");
var imgurl=$this.find(".upload_img_name").val();
console.log(imgurl)
$this.find(".img-before-photo-ys").attr("src",imgurl);
$this.find(".img-before-photo").attr("src",imgurl);
$this.find(".img-after-photo img").attr("src",imgurl);
$this.find(".imgAreaDiv").show();
$this.find('.img-before-photo').imgAreaSelect({
aspectRatio:"1:1",
handles: true,
autoHide:true,
onSelectEnd: preview
});
//截图事件
function preview(img, selection) {
console.log(selection);
if (!selection.width || !selection.height)
return;
var scaleX = 150 / selection.width;
var scaleY = 150 / selection.height;
var hei = $this.find('.img-before-photo').height();
var wid = $this.find('.img-before-photo').width();
//console.log(scaleX+"|"+scaleY+"|"+hei+"|"+wid)
$this.find('.img-after-photo img').css({
width: Math.round(scaleX * wid),
height: Math.round(scaleY * hei),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
//上传截图事件
$this.find('.img-area-pic').unbind('click').click(function(){
var cm=$this.find(".img-before-photo-ys").width()/300;
$.ajax({
type: 'post',
url: opts.cuturl,
data: {
srcPath:img.src,
x:parseInt(selection.x1*cm),
y:parseInt(selection.y1*cm),
width:parseInt(selection.width*cm),
height:parseInt(selection.height*cm)
},
dataType: 'json',
success: function (data) {
console.log(data)
if(data.code==1000){
$this.find(".upload_img_name").val(data.datas.fileName);
$this.find(".s-up-img img").attr("src",data.datas.fileName);
$this.find(".imgAreaDiv").hide();
}
}
})
});
}
//关闭截图窗口
$this.find(".img-area-close").click(function(){
$this.find(".imgAreaDiv").hide();
});
});
if(opts.height=="auto"){
$this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:"auto"});
}else{
$this.find(".s-up-k, .s-up-img").css({width:opts.width+"px",height:opts.width+"px"});
}
if(opts.minheight!=""){
$this.find(".s-up-k2").css({width:opts.minheight+"px",height:opts.minheight+"px"});
}
//删除事件
delpic();
//开始上传图片
uploadpic(fd,$this.find(".s-up-wcon"));
//上传成功后清空文件栏
opts.nowfilenum = opts.nowfilenum + 1;
if (opts.nowfilenum >= opts.maxfilenum) {
$this.find(".s-up-add").hide();
}
}
//自定义获取图片路径函数
function getObjectURL(file) {
var url = null;
if (window.navigator.userAgent.indexOf("Chrome") >= -1 || window.navigator.userAgent.indexOf("Safari") >= -1) {
url = window.webkitURL.createObjectURL(file);
}
else {
url = window.URL.createObjectURL(file);
}
return url;
}
//删除图片事件
function delpic() {
//删除图片按钮鼠标滑过事件
$this.find(".s-up-wcon").hover(function () {
$(this).find(".s-up-close").show();
}, function () {
$(this).find(".s-up-close").hide();
});
//删除图片按钮点击事件
$this.find(".s-up-close").unbind('click').on("click", function () {
console.log($(this).parent().index());
var curindex=$(this).parent().index();
$(this).parent().remove();
opts.nowfilenum = opts.nowfilenum - 1;
$this.find(".s-up-add").show();
opts.uploadimgurls.splice(curindex,1);
$this.find(".upload_img_name").val(opts.uploadimgurls);
});
}
//上传图片功能
function uploadpic(fd,curdiv) {
//开始ajax请求,后台用的tp
$.ajax({
type: 'post',
url: opts.uploadurl,
data: fd,
processData: false, // tell jQuery not to process the data ,这个是必须的,否则会报错
contentType: false, // tell jQuery not to set contentType
dataType: 'json',
xhr: function () {//这个是重点,获取到原始的xhr对象,进而绑定upload.onprogress
var xhr = $.ajaxSettings.xhr();
console.log(xhr);
console.log(xhr.response);
xhr.upload.onprogress = function (ev) {
//这边开始计算百分比
var parcent = 0;
if (ev.lengthComputable) {
percent = 100 * ev.loaded / ev.total;
percent = parseFloat(percent).toFixed(2);
console.log(percent)
//$('.bgpro').css('width',percent + '%').html(percent + '%');
}
};
return xhr;
},
success: function (data) {
console.log(data);
if(data.fileResult==1){
opts.uploadimgurls.push(data.fileName);
//$this.attr("cur_pic_url",data);
if(opts.cutshow && opts.maxfilenum==1){
curdiv.find(".s-cut-pic").show();
}
curdiv.find(".s-up-loading").hide();
$this.find(".upload_img_name").val(opts.uploadimgurls);
}else{
alert("上传失败");
}
}
});
}
});
};
})(jQuery);
css部分:
body{
font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
margin: 0;
padding: 0;
}
p{
padding: 0;
margin: 0;
}
.btn-upload{
position: relative;
font-size: 12px;
padding: 5px 15px;
background-color: #2c8aec;
display: inline-block;
color: #fff;
}
.btn-upload-input{
position: absolute;
z-index: 1;
top: 0;
left: 0;
right:0;
bottom:0;
opacity: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.controls input.btn-upload-input{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width:100%;
height:100%;
opacity: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.show-upload{
}
.s-up-k{
position: relative;
padding: 0;
width: 80px;
height: 80px;
overflow:hidden;
background-color: #fff;
border: 1px solid #ddd;
}
.s-up-k input{
height:100%;
}
.s-up-loading{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color: rgba(0,0,0,0.5);
}
.s-load-tb{
display: inline-block;
width: 30px;
height: 30px;
background-image: url(../img/loading.gif);
background-size: contain;
background-position: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -15px;
margin-top: -15px;
z-index: 4;
}
.s-up-k2{
position: relative;
padding: 0;
width: 80px;
height: 80px;
overflow:hidden;
background-color: #fff;
border: 1px solid #ddd;
}
.s-up-k2 input{
height:100%;
}
.s-up-img{
display:flex;
align-items: center;
width: 80px;
height: 80px;
overflow: hidden;
}
.s-up-close{
position: absolute;
display: none;
right:-10px;
top:-10px;
width: 20px;
height: 20px;
background-image: url("../img/new_06.png");
background-size: contain;
background-position: center;
}
.s-up-add{
position: relative;
text-align: center;
}
.s-add-img{
position: absolute;
width: 26px;
height: 25px;
top: 50%;
margin-left: -13px;
margin-top: -13px;
left: 50%;
display: inline-block;
background-image: url("../img/new_03.png");
}
.s-up-wcon{
position: relative;
float: left;
margin-right: 15px;
display: inline-block;
margin-bottom: 10px;
}
.gg-attr-img{
margin-top: 5px;
}
.s-cut-pic{
display:none;
width: 100%;
line-height: 30px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #e78b24;
cursor: pointer;
}
/*裁剪图片样式*/
.imgAreaDiv{
display: none;
}
.img-area-mask{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: #ccc;
opacity:0.5;
z-index: 98;
}
.img-area-k{
position: fixed;
width: 600px;
height: 410px;
top:50%;
margin-top: -220px;
left: 50%;
margin-left: -300px;
border: 1px solid #ddd;
background-color: #fff;
z-index: 99;
}
.imgAreaDiv img{
max-width: none;
}
.img-area-title{
position: relative;
border-bottom: 1px solid #ddd;
line-height: 35px;
color: #fff;
background-color: #e78b24;
padding-left: 10px;
font-size: 14px;
}
.img-area-close{
position: absolute;
display: none;
right: 0;
top:0;
cursor:pointer;
width: 20px;
height: 20px;
display: inline-block;
}
.img-area-con{
display: flex;
height: 325px;
}
.img-area-ys{
padding-top: 10px;
width: 350px;
height: 325px;
text-align: center;
overflow: auto;
border-right:1px solid #ddd;
}
.img-area-ys img{
}
.img-area-cj{
width: 250px;
}
.img-cj-txt{
width: 100%;
line-height: 30px;
font-size: 14px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.img-cj-con{
width: 100%;
text-align: center;
}
.img-before-photo{
width:300px;
}
.img-cj-pic{
margin: 20px auto 0 auto;
width: 150px;
height:150px;
overflow: hidden;
}
.img-cj-pic img{
width: 150px;
height:150px;
}
.img-area-pic{
padding: 5px 10px;
font-size: 14px;
float: right;
margin-top: 2px;
margin-right: 10px;
border: 1px solid #ddd;
background-color: #e78b24;
color: #fff;
}
.img-area-footer{
height: 30px;
border-top:1px solid #ddd;
}
插件下载地址:http://download.csdn.net/download/jylonger/10141917