您的位置：首页 > Web前端 > JavaScript
js/uploadifive html图片批量上传插件

2015-11-11 10:42 716 查看
<html>
<head>
<title></title>
</head>
<body>
<div class="col-sm-12" style="display: none;">
<h5>
车辆图片 <small class="pull-right"><input id="main_uploadify" style="display: none;" name="main_uploadify" type="file" multiple="true"> <button class="btn btn-xs btn-danger batchDelMain" id="batchDelMain" style="border-radius: 3px;z-index: 1000;"><small class="pull-right">批量删除</small></button></small>
</h5>
<div style="text-align: center; overflow: hidden;min-height: 10px;" id="queue_main" class="well well-sm">
<span id="queue_txt">还没有上传图片</span>
</div>
<div class="well well-sm" id="main_content" style="overflow: hidden;"></div>
</div>
<div id="main_template" style="display: none;">
<div class="img-pic-xiangq" style="position: relative; overflow: hidden;">
<img width="100%" height="142" src="#mian_img_url#">
<div style="height: 25px;line-height: 25px;" class="pic-hidden col-sm-12">
<input type="checkbox" name="main_img_checkbox" value="#main_img_id#">
<div class="pic-hidden0 col-sm-10 pull-right no-padding" style="margin-top: -25px;">
<span class="col-sm-8 text-right pull-right no-padding"><a style="margin-right: 10px;" class="defaultMainImg" id="defaultMainImg" href="#">设为默认</a><a id="delMainImg" class="close-pic" href="#">删除</a></span>
</div>
</div>
</div>
</div><script type="text/javascript">

        $(document).ready(function(){
$("#main_uploadify").uploadifive({
//'auto' : false,   //取消自动上传
"uploadScript" : "${ctx}/pic_uploadItemPic",  //处理上传文件Action路径
"fileObjName" : "uploadify",        //文件对象
"buttonText"   : '<button   class="btn btn-xs btn-primary margin-right" style="border-radius: 3px;" id="main_up_btn">批量上传外观图<\/button>',   //按钮显示文字
"queueID"      : "queue_main", //提示信息放置目标
"fileType"     : "*.jpg;*.gif;*.png;*.jpeg;",   //允许上传文件类型
"removeCompleted" : true,
"formData":{
"car_source_no":car_source_no,
"car_id":car_id,
"img_type":"10"
},
"onUploadComplete" : function(file, data) { //文件上传成功后执行
var json=eval("("+data+")");//转换为json对象
$("#main_content").append($("#main_template").html().replaceAll("#mian_img_url#",server_path+json.imgUrl).replaceAll("#main_img_id#",json.id));
$("#queue_txt").html("图片上传成功。");
},
"onProgress" : function(file, data) {
$("#queue_txt").html("上传图片："+file.name);
}
});

$(document).on('mouseenter', '.img-pic-xiangq', function() {
$(this).children(".pic-hidden").children(".pic-hidden0").stop(true,true);
$(this).children(".pic-hidden").children(".pic-hidden0").animate({"margin-top":"0px"});
});
$(document).on('mouseleave', '.img-pic-xiangq', function() {
$(this).children(".pic-hidden").children(".pic-hidden0").stop(true,true);
$(this).children(".pic-hidden").children(".pic-hidden0").animate({"margin-top":"-25px"});
});

$(document).on('click', '.img-pic-xiangq', function(e) {
$(this).find("input[type='checkbox']").click();
e.stopPropagation();
});

$(document).on('click', '#main_content #delMainImg', function(e) {
var _this =$(this);
if(confirm("是否确认删除?")){
var parent = $(this).parent().parent().parent();
var img_id = parent.find("input").val();
$.post("${ctx}/pic_deleteImage", {
"id" : img_id,
"car_source_no":car_source_no,
"deleted" : "1"
}, function(data) {
if (data.optFlag == 'Y') {
parent.parent().remove();
var count = $(".nav-tabs").find("li[class='active']").find(".badge-danger");
count.html(parseInt(count.html())-1);

}
},"json");
}
e.stopPropagation();
});

$(document).on('click', '#defaultMainImg', function(e) {
var _this = $(this);
var parent = $(this).parent().parent().parent();
var img_id = parent.find("input").val();
$.post("${ctx}/pic_updateDefaultImage", {
"id" : img_id,
"car_source_no":car_source_no,
"default_value" : "1"
}, function(data) {
if (data.optFlag == 'Y') {
parent.parent().parent().find(".defaultMainImg").each(function(index){
$(this).html("设为默认");
});
_this.html("默认");
}
},"json");
e.stopPropagation();
return false;
});

$(".batchDelMain").click(function(){
var _this= $(this);
var $ids_input = $(this).parent().parent().parent().find(".well-sm").find("input[type='checkbox']:checked");
if($ids_input.length==0){
alert("未选择任何图片");
return;
}
var ids = new Array();
$ids_input.each(function(){
var id = $(this).val().trim();
if(id!='')
ids.push(id);
});
if(confirm("确认删除选中图片?")){
$.post("${ctx}/pic_deleteImages", {
"car_source_no":car_source_no,
"ids" : ids
}, function(data) {
if (data.optFlag == 'Y') {
$ids_input.each(function(){
$(this).parent().parent().remove();
});
var count = $(".nav-tabs").find("li[class='active']").find(".badge-danger");
count.html(parseInt(count.html())-$ids_input.length);
if(_this.parent().parent().find("span").html().length<10){
var c = _this.parent().parent().parent().length;
_this.parent().parent().find("span:first").html(c);
}
}
},"json");
}
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航