zyupload图片上传，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
var operimg_id;
var zoom_rate=100;
var zoom_timeout;
function rotateimg(){var smallImg=$("#"+operimg_id);var num=smallImg.attr('curr_rotate');if(num==null){num=0;}num=parseInt(num);num +=1;smallImg.attr('curr_rotate',num);$("#show_img").rotate({angle:90*num});smallImg.rotate({angle:90*num});
}function createOpenBox(){if($('#operimg_box').length==0){var html = ' <div class="operimg_box" id="operimg_box">';html += ' <img id="show_img" src="" onclick="get_imgsize()" />';html += ' <span class="set_img percent_img" id="zoom_show" >percent</span>';html += ' <span class="set_img zoomin" onclick="zoomIn()"></span>';html += ' <span class="set_img zoomout" onclick="zoomOut()"></span>';html += ' <span class="set_img ratateimg" id="btn_rotateimg" onclick="rotateimg()"></span>';html += ' <span class="set_img close_img" id="delimg"></span>';html += ' <span class="set_img arrowleft" onclick="prevImg()"></span>';html += ' <span class="set_img arrowright" onclick="nextImg()"></span>';html += ' <span class="set_img operarea_box"></span>';html += ' </div><div class="clearboth"></div><div id="mask_bg">dfdfdfdfdfd是打发第三方</div>';$('body').append(html); }
}
function get_imgsize(){var img_size=$("#show_img").width();//alert(img_size);
}function setNewIndex(isNext) {var imgs = $('#preview').find('img[class="upload_image"]');var imgCount = imgs.length;var currIndex=0;for(var i=0;i<imgCount;i++){if($(imgs[i]).attr('id')==operimg_id){currIndex = i;break;}}if (isNext) {currIndex += 1;if (currIndex >= imgCount) {currIndex = 0;}} else {currIndex -= 1;if (currIndex < 0) {currIndex =imgCount-1;} }return $(imgs[currIndex]).attr('id').replace('uploadImage_','');
}
function nextImg() {var index = setNewIndex(true);setimgbox(index);
}
function prevImg() {var index = setNewIndex(false);setimgbox(index);
}
function zoomIn() {zoom_rate += 10;doZoom(zoom_rate);setoperimgbox();
}
function zoomOut() {zoom_rate -= 10;doZoom(zoom_rate);setoperimgbox();
}function doZoom(zoom_rate){//$("#show_img").css('width', zoom_rate + '%').css('height', zoom_rate + '%'); var naturalWidth= $("#show_img")[0].naturalWidth;$("#show_img").css('width', naturalWidth*zoom_rate*0.01+'px');clearTimeout(zoom_timeout);zoom_rate=parseInt(zoom_rate);$("#zoom_show").show();$("#zoom_show").html(zoom_rate+'%');zoom_timeout=setTimeout(function (){$("#zoom_show").hide('fast');},1000);
}
function setoperimgbox(){var obImage=$("#operimg_box");var ob_width = obImage.width();var ob_height = obImage.height();//alert(ob_width +":"+ob_height);var ob_left = (window.innerWidth-ob_width)/2;var ob_top = (window.innerHeight-ob_height)/2;console.log(ob_left+" "+ob_top+" "+ ob_width+" "+ob_height+" "+window.innerWidth+" "+window.innerHeight);$("#operimg_box").css("left",ob_left).css("top",ob_top);$("#mask_bg").show();$("#operimg_box").show();
}/*删除*/
function delimg(index){//var imgboxid=$(x).parent().parent().attr("id");var smallimgbox='uploadList_'+index;ZYFILE.funDeleteFile(parseInt(index), true)$("#"+smallimgbox).remove();}function setimgbox(index){createOpenBox();zoom_rate = 100;operimg_id='uploadImage_'+index;var smallImg=$("#"+operimg_id);// alert(smallImg[0].naturalWidth);var naturalWidth=smallImg[0].naturalWidth;var naturalHeight=smallImg[0].naturalHeight;zoom_rate=600/Math.max(naturalWidth,naturalHeight)*100;$("#show_img").attr("src",smallImg.attr('src'));$("#mask_bg").show();$("#operimg_box").show();//$("#show_img").css('width', zoom_rate + '%').css('height', zoom_rate + '%');$("#show_img").css('width', naturalWidth*zoom_rate*0.01+'px');var num=$("#"+operimg_id).attr('curr_rotate');$("#show_img").rotate({angle:90*num});$("#delimg").click(function(){$("#show_img").attr("src","");$("#operimg_box").hide();$("#mask_bg").hide();});setoperimgbox();
}
/**/
//引用初始化JS
$(function(){// 初始化插件$("#demo").zyUpload({width : "650px", // 宽度height : "400px", // 宽度itemWidth : "120px", // 文件项的宽度itemHeight : "100px", // 文件项的高度url : "/upload/UploadAction", // 上传文件的路径multiple : true, // 是否可以多个文件上传dragDrop : true, // 是否可以拖动上传文件del : true, // 是否可以删除文件finishDel : false, // 是否在上传文件完成后删除预览/* 外部获得的回调接口 */onSelect: function(files, allFiles){ // 选择文件的回调方法console.info("当前选择了以下文件：");console.info(files);console.info("之前没上传的文件：");console.info(allFiles);},onDelete: function(file, surplusFiles){ // 删除一个文件的回调方法console.info("当前删除了此文件：");console.info(file);console.info("当前剩余的文件：");console.info(surplusFiles);},onSuccess: function(file){ // 文件上传成功的回调方法console.info("此文件上传成功：");console.info(file);},onFailure: function(file){ // 文件上传失败的回调方法console.info("此文件上传失败：");console.info(file);},onComplete: function(responseInfo){ // 上传完成的回调方法console.info("文件上传完成");console.info(responseInfo);}});
});全部代码：zyupload图片上传
