实例介绍
【实例简介】系统基于jquery fileupload 插件开发，后台使用php进行数据接收。支持同时上传多张图片，多张图片之间可随意调整位置；支持jpg、gif、png格式上传，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存。
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图片可拖拽demo</title>
</head>
<body>
<style>
.upload-thumb {
display: block !important;
float: left;
width: 147px !important;
height: 147px !important;
position: relative;
}
.upload-thumb img {
width: 100%;
height: 100%;
}
.img-box, .sku-img-box {
overflow: hidden;
}
.off-box, .sku-off-box {
position: absolute;
width: 18px;
height: 18px;
right: 0;
top: 0;
line-height: 18px;
background-color: #FFF;
cursor: pointer;
text-align: center;
}
.black-bg {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.hide {
display: none;
}
.img-error {
color: red;
height: 25px;
line-height: 25px;
display: none;
}
.hint {
font-size: 12px;
line-height: 16px;
color: #BBB;
margin-top: 10px;
}
.ncsc-goods-default-pic .goodspic-uplaod .handle {
height: 30px;
margin: 10px 0;
}
.ncsc-upload-btn, .upload-btn {
vertical-align: top;
width: 80px;
height: 30px;
margin: 10px 5px 0 0;
display: block;
position: relative;
z-index: 1;
}
.ncsc-upload-btn {
display: inline-block;
margin: 0 5px 0;
vertical-align: middle;
}
.ncsc-upload-btn span, .upload-btn span {
width: 80px;
height: 30px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
cursor: pointer;
}
.ncsc-upload-btn .input-file, .upload-btn .input-file {
width: 80px;
height: 30px;
padding: 0;
margin: 0;
border: none 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.ncsc-upload-btn p, .upload-btn p {
font-size: 12px;
line-height: 20px;
background-color: #F5F5F5;
text-align: center;
color: #666;
width: 78px;
height: 20px;
padding: 4px 0;
border: solid 1px;
border-color: #DCDCDC #DCDCDC #B3B3B3 #DCDCDC;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
z-index: 1;
}
select, input[type="file"] {
height: 30px;
line-height: 30px;
}
.base {
width: 80%;
background-color: #fff;
border-radius: 20px;
margin: auto;
}
</style>
<h2 style="text-align:center;margin-top: 120px;">多图片上传DEMO（可拖动排序）</h2>
<div class="base">
<div id="goods_picture_box" class="controls" style="background-color:#FFF;border: 1px solid #E9E9E9;">
<div class="ncsc-goods-default-pic">
<div class="goodspic-uplaod" style="padding: 15px;">
<div class='img-box' style="min-height:160px;">
<div class="upload-thumb" id="default_uploadimg">
<img src="album/default_goods_image_240.gif">
</div>
</div>
<div class="clear"></div>
<span class="img-error">最少需要一张图片作为商品主图</span>
<p class="hint">上传多张图片，<font color="red">支持同时上传多张图片,多张图片之间可随意调整位置</font>；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在uploads文件夹中。
</p>
<div class="handle">
<div class="ncsc-upload-btn">
<a href="javascript:void(0);">
<span>
<input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
</span>
<p>图片上传</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="album_id" value="1"/>
<script src="js/jquery-1.8.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/drag-arrange.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajax_file_upload.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.fileupload.js" charset="utf-8"></script>
<script type="text/javascript">
var dataAlbum;
var UPLOADGOODS = 'UPLOAD_GOODS';//存放商品图片
$(function () {
//给图片更换位置事件
$('.draggable-element').arrangeable();
var album_id = $("#album_id").val();
dataAlbum = {
"album_id": album_id,
"type": "1,2,3,4",
'file_path': UPLOADGOODS
};
// ajax 上传图片
var upload_num = 0; // 上传图片成功数量
$('#fileupload').fileupload({
url: "upload.php",
dataType: 'json',
//formData:dataAlbum,
add: function (e, data) {
$("#goods_picture_box .img-error").hide();
$("#goods_picture_box #default_uploadimg").remove();
//显示上传图片框
var html = "";
$.each(data.files, function (index, file) {
html = '<div class="upload-thumb draggable-element" nstype="' file.name '">';
html = '<img nstype="goods_image" src="album/uoload_ing.gif">';
html = '<input type="hidden" class="upload_img_id" nstype="goods_image" value="">';
html = '<div class="black-bg hide">';
html = '<div class="off-box">×</div>';
html = '</div>';
html = '</div>';
});
$(html).appendTo('#goods_picture_box .img-box');
//模块可拖动事件
$('#goods_picture_box .draggable-element').arrangeable();
data.submit();
},
done: function (e, data) {
var param = data.result;
$this = $('#goods_picture_box div[nstype="' param.origin_file_name '"]');
if (param.state > 0) {
$this.removeAttr("nstype");
$this.children("img").attr("src", param.file_name);
$this.children("input[type='hidden']").val(param.file_id);
} else {
$this.remove();
if ($("#goods_picture_box .img-box .upload-thumb").length == 0) {
var img_html = '<div class="upload-thumb" id="default_uploadimg">';
img_html = '<img src="album/default_goods_image_240.gif">';
img_html = '</div>';
$("#goods_picture_box .img-box").append(img_html);
}
$("#goods_picture_box .img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
}
}
})
//图片幕布出现
$(".draggable-element").live('mouseenter', function () {
$(this).children(".black-bg").show();
});
//图片幕布消失
$(".draggable-element").live('mouseleave', function () {
$(this).children(".black-bg").hide();
});
//删除页面图片元素
$(".off-box").live('click', function () {
if ($(".img-box .upload-thumb").length == 1) {
var html = "";
html = '<div class="upload-thumb" id="default_uploadimg">';
html = '<img nstype="goods_image" src="album/default_goods_image_240.gif">';
html = '<input type="hidden" name="image_path" id="image_path" nstype="goods_image" value="">';
html = '</div>';
$(html).appendTo('.img-box');
}
$(this).parent().parent().remove();
});
});
//备用
function img_upload() {
}
//图片上传方法
//此方法备用，后续在使用中需要进行相应的修改，不能直接使用。
//有的一个页面有可能有两个上传图片地方，所以添加此方法。届时在
//<input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
//增加一个onclick事件就可以了：onclick="file_upload(this);"
function file_upload(obj) {
var spec_id = $(obj).attr("spec_id");
var spec_value_id = $(obj).attr("spec_value_id");
$('.sku-draggable-element' spec_id '-' spec_value_id).arrangeable();
$(obj).fileupload({
url: "upload.php",
dataType: 'json',
formData: dataAlbum,
add: function (e, data) {
var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
var spec_id = box_obj.attr("spec_id");
var spec_value_id = box_obj.attr("spec_value_id");
box_obj.find(".img-error").hide();
box_obj.find("#sku_default_uploadimg").remove();
//显示上传图片框
var html = "";
$.each(data.files, function (index, file) {
html = '<div class="upload-thumb sku-draggable-element' spec_id '-' spec_value_id ' sku-draggable-element" nstype="' file.name '">';
html = '<img nstype="goods_image" src="album/uoload_ing.gif">';
html = '<input type="hidden" class="sku_upload_img_id" nstype="goods_image" spec_id="" spec_value_id="" value="">';
html = '<div class="black-bg hide">';
html = '<div class="sku-off-box">×</div>';
html = '</div>';
html = '</div>';
});
box_obj.find('.sku-img-box').append(html);
//模块可拖动事件
$('.sku-draggable-element' spec_id '-' spec_value_id).arrangeable();
data.submit();
},
done: function (e, data) {
var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
var spec_id = box_obj.attr("spec_id");
var spec_value_id = box_obj.attr("spec_value_id");
var param = data.result;
$this = box_obj.find('div[nstype="' param.origin_file_name '"]');
if (param.state > 0) {
$this.removeAttr("nstype");
$this.children("img").attr("src", __IMG(param.file_name));
$this.children("input[type='hidden']").val(param.file_id);
$this.children("input[type='hidden']").attr("spec_id", spec_id);
$this.children("input[type='hidden']").attr("spec_value_id", spec_value_id);
//将上传的规格图片记录
for (var i = 0; i < $sku_goods_picture.length; i ) {
if ($sku_goods_picture[i].spec_id == spec_id && $sku_goods_picture[i].spec_value_id == spec_value_id) {
$sku_goods_picture[i]["sku_picture_query"].push({
"pic_id": param.file_id,
"pic_cover_mid": param.file_name
});
}
}
} else {
$this.remove();
if (box_obj.find(".upload-thumb").length == 0) {
var img_html = '<div class="upload-thumb" id="default_uploadimg">';
img_html = '<img src="album/default_goods_image_240.gif">';
img_html = '</div>';
box_obj.find(".sku-img-box").append(img_html);
}
box_obj.find(".img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
}
}
})
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论