|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cp_imagelist.aspx.cs" Inherits="WinWooWeb.ProductManage.cp_imagelist" %>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>图片库</title>
|
|
|
<meta name="referrer" content="no-referrer">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<script src="js/jquery.js"></script>
|
|
|
<script src="js/upload.js"></script>
|
|
|
<link rel="stylesheet" type="text/css" href="../css/New2.css?a=162344" />
|
|
|
<link href="../css/ListNew2.css?a=133" rel="stylesheet" type="text/css" />
|
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
|
<script src="js/jquery-2.0.3.min.js" iconfont="true"></script>
|
|
|
<script src="js/Jsequencing.js?a=62" iconfont="true"></script>
|
|
|
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/Global.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/WindowLoad.js?t=1" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery.url.js" type="text/javascript"></script>
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var dragImgUpload = null;
|
|
|
var dragImgUpload2 = null;
|
|
|
function blobToDataURL(blob, callback) {
|
|
|
let a = new FileReader();
|
|
|
a.onload = function (e) { callback(e.target.result); }
|
|
|
a.readAsDataURL(blob);
|
|
|
}
|
|
|
var imgulp = null;
|
|
|
var imgulp2 = null;
|
|
|
var imglist = null;
|
|
|
var code = "";
|
|
|
$(document).ready(function () {
|
|
|
ajaxInit(null);
|
|
|
Is_GYSDept();
|
|
|
code = $.url.param("code");
|
|
|
if (code != undefined || code != "") {
|
|
|
$("#txt_code").val(code);
|
|
|
GetGoodsImg();
|
|
|
}
|
|
|
|
|
|
$("#chk_all2").bind("click", function () {
|
|
|
if ($(this).is(":checked") == true) {
|
|
|
$("#img_ul2 input").prop("checked", true);
|
|
|
$("#img_ul2 input").each(function () {
|
|
|
var index = parseInt($(this).parents(".item").attr("item"));
|
|
|
var thisid = $(this).parents(".item").attr("id");
|
|
|
|
|
|
imgulp2.selectall(thisid, index,1);
|
|
|
});
|
|
|
|
|
|
}
|
|
|
else {
|
|
|
$("#img_ul2 input").prop("checked", false);
|
|
|
$("#img_ul2 input").each(function () {
|
|
|
var index = parseInt($(this).parents(".item").attr("item"));
|
|
|
var thisid = $(this).parents(".item").attr("id");
|
|
|
|
|
|
imgulp2.selectall(thisid, index,0);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
});
|
|
|
$("#chk_all").bind("click", function () {
|
|
|
if ($(this).is(":checked") == true) {
|
|
|
$("#img_ul input").prop("checked", true);
|
|
|
$("#img_ul input").each(function () {
|
|
|
var index = parseInt($(this).parents(".item").attr("item"));
|
|
|
var thisid = $(this).parents(".item").attr("id");
|
|
|
|
|
|
imgulp.selectall(thisid, index,1);
|
|
|
});
|
|
|
}
|
|
|
else {
|
|
|
$("#img_ul input").prop("checked", false);
|
|
|
$("#img_ul input").each(function () {
|
|
|
var index = parseInt($(this).parents(".item").attr("item"));
|
|
|
var thisid = $(this).parents(".item").attr("id");
|
|
|
|
|
|
imgulp.selectall(thisid, index,0);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
dragImgUpload = new DragImgUpload("#drop_area", {
|
|
|
callback: function (files) {
|
|
|
//回调函数，可以传递给后台等等
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
var file = files[i];
|
|
|
// var img = window.URL.createObjectURL(file);
|
|
|
|
|
|
let reader = new FileReader() //新建一个FileReader对象
|
|
|
|
|
|
reader.readAsDataURL(file) //将读取的文件转换成base64格式
|
|
|
|
|
|
var imgbase64 = "";
|
|
|
|
|
|
reader.onload = function (e) {
|
|
|
//将img标签的src换成base64格式，并显示出来
|
|
|
|
|
|
imgbase64 = e.target.result;
|
|
|
var param = new Object();
|
|
|
param.umgbase=imgbase64;
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "cp_productservice.asmx/GetImg",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: 'json',
|
|
|
success: function (data, status) {
|
|
|
|
|
|
addimg2(data.d, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
});
|
|
|
dragImgUpload2 = new DragImgUpload("#drop_area2", {
|
|
|
callback: function (files) {
|
|
|
//回调函数，可以传递给后台等等
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
var file = files[i];
|
|
|
|
|
|
let reader = new FileReader() //新建一个FileReader对象
|
|
|
|
|
|
reader.readAsDataURL(file) //将读取的文件转换成base64格式
|
|
|
|
|
|
var imgbase64 = "";
|
|
|
|
|
|
reader.onload = function (e) {
|
|
|
//将img标签的src换成base64格式，并显示出来
|
|
|
|
|
|
imgbase64 = e.target.result;
|
|
|
var param = new Object();
|
|
|
param.umgbase=imgbase64;
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "cp_productservice.asmx/GetImg",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: 'json',
|
|
|
success: function (data, status) {
|
|
|
|
|
|
addimg3(data.d, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
imgulp = new Jsequencing({
|
|
|
listid: "img_ul",//页面图片列表ID
|
|
|
thumbherf: "",//列表图片前缀
|
|
|
bigherf: "",//原图前缀[同列表图相同时，省略]
|
|
|
jsondata: true,
|
|
|
imgsrcarr: [//图片数据数组
|
|
|
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 1 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 2 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 3 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 4 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 5 }
|
|
|
],
|
|
|
});
|
|
|
|
|
|
imgulp2 = new Jsequencing({
|
|
|
listid: "img_ul2",//页面图片列表ID
|
|
|
thumbherf: "",//列表图片前缀
|
|
|
bigherf: "",//原图前缀[同列表图相同时，省略]
|
|
|
jsondata: true,
|
|
|
imgsrcarr: [//图片数据数组
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅0", id: 1 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅1", id: 2 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅2", id: 3 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅3", id: 4 },
|
|
|
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅4", id: 5 }
|
|
|
],
|
|
|
});
|
|
|
if (imglist != null) {
|
|
|
$(imglist).each(function () {
|
|
|
if (this.Is_master == 1)
|
|
|
addimg2(this.Img_url, this.Img_id);
|
|
|
else
|
|
|
addimg3(this.Img_url, this.Img_id);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
var isgys = 0;
|
|
|
function Is_GYSDept() {
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
url: "cp_productservice.asmx/Is_GYSDept",
|
|
|
// data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
async: false,
|
|
|
success: function (data) {
|
|
|
|
|
|
if (data.d > 0) {
|
|
|
isgys = 1;
|
|
|
$("#img_del,#img_del2").show();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function GetGoodsImg() {
|
|
|
|
|
|
var param = new Object();
|
|
|
param.code=code;
|
|
|
$.ajax({
|
|
|
url: "cp_productservice.asmx/GetListGoodsImg",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: "json",
|
|
|
async:false,
|
|
|
success: function (data) {
|
|
|
if (data.d != null) {
|
|
|
imglist = data.d;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
function addimg2(ig, id) {
|
|
|
|
|
|
imgulp.addimgarr([
|
|
|
{ src: ig, title: "", id: id }
|
|
|
])
|
|
|
}
|
|
|
function addimg3(ig, id) {
|
|
|
|
|
|
imgulp2.addimgarr([
|
|
|
{ src: ig, title: "", id: id }
|
|
|
])
|
|
|
}
|
|
|
function GetSort() {
|
|
|
if ($("#txt_code").val() == "") {
|
|
|
alert("请填写货物编号");
|
|
|
return;
|
|
|
}
|
|
|
var arr = imgulp.getnewarr();
|
|
|
var simlist = new Array();
|
|
|
var sort = 1;
|
|
|
$(arr).each(function () {
|
|
|
var smd = new Object();
|
|
|
smd.Img_id = this.id;
|
|
|
smd.Img_url = this.src;
|
|
|
smd.Is_master = 1;
|
|
|
smd.Img_type = 1;
|
|
|
smd.Img_Sort = sort;
|
|
|
sort++;
|
|
|
smd.Item_bh = $("#txt_code").val();
|
|
|
Array.add(simlist, smd);
|
|
|
// alert(this.id);
|
|
|
});
|
|
|
var arr2 = imgulp2.getnewarr();
|
|
|
$(arr2).each(function () {
|
|
|
|
|
|
var smd = new Object();
|
|
|
smd.Img_type = 1;
|
|
|
smd.Img_id = this.id;
|
|
|
smd.Img_url = this.src;
|
|
|
smd.Is_master = 0;
|
|
|
smd.Img_Sort = sort;
|
|
|
sort++;
|
|
|
smd.Item_bh = $("#txt_code").val();
|
|
|
Array.add(simlist, smd);
|
|
|
// alert(this.id);
|
|
|
});
|
|
|
var param = new Object();
|
|
|
param.list = simlist;
|
|
|
param.list2=imglist;
|
|
|
$.ajax({
|
|
|
url: "cp_productservice.asmx/Save_GoodsImg",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: "json",
|
|
|
async:false,
|
|
|
success: function (data) {
|
|
|
alert("保存成功");
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
function addimg() {
|
|
|
imgulp.addimgarr([
|
|
|
{ src: 'a1.png?id=1' }
|
|
|
])
|
|
|
}
|
|
|
function deleteimg() {
|
|
|
if ($("#img_ul input:checked").length == 0) {
|
|
|
alert("请选择要删除的图片");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (window.confirm('确定要删除这些图片吗？') == false) return;
|
|
|
imgulp.datadel();
|
|
|
|
|
|
}
|
|
|
function deleteimg2() {
|
|
|
|
|
|
if ($("#img_ul2 input:checked").length == 0) {
|
|
|
alert("请选择要删除的图片");
|
|
|
return;
|
|
|
}
|
|
|
if (window.confirm('确定要删除这些图片吗？') == false) return;
|
|
|
imgulp2.datadel();
|
|
|
|
|
|
}
|
|
|
|
|
|
function SaveImgList2() {
|
|
|
if ($("#img_ul input:checked").length == 0) {
|
|
|
alert("请选择要下载的图片");
|
|
|
return;
|
|
|
}
|
|
|
var list = new Array();
|
|
|
$("#img_ul input:checked").each(function () {
|
|
|
var url = $(this).parent().find("img").attr("src");
|
|
|
if (url!= "") {
|
|
|
|
|
|
var md = new Object();
|
|
|
md.Img_url = url;
|
|
|
Array.add(list, md);
|
|
|
}
|
|
|
|
|
|
});
|
|
|
$("#a_tp2").hide();
|
|
|
var param = new Object();
|
|
|
param.list = list;
|
|
|
param.code = $("#txt_code").val();
|
|
|
$.ajax({
|
|
|
url: "cp_productservice.asmx/SaveImgRar",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: "json",
|
|
|
//async:false,
|
|
|
success: function (data) {
|
|
|
if (data.d != null) {
|
|
|
alert("打包完成，可以点击下载");
|
|
|
$("#a_tp2").show();
|
|
|
$("#a_tp2").attr("href", data.d);
|
|
|
// var params = { FilePath: data.d, FileName: "图片导出.rar" };
|
|
|
// Window.location ="../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
function SaveImgList() {
|
|
|
if ($("#img_ul2 input:checked").length == 0) {
|
|
|
alert("请选择要下载的图片");
|
|
|
return;
|
|
|
}
|
|
|
var list = new Array();
|
|
|
$("#img_ul2 input:checked").each(function () {
|
|
|
var url = $(this).parent().find("img").attr("src");
|
|
|
if (url!= "") {
|
|
|
|
|
|
var md = new Object();
|
|
|
md.Img_url = url;
|
|
|
Array.add(list, md);
|
|
|
}
|
|
|
|
|
|
});
|
|
|
$("#a_tp").hide();
|
|
|
var param = new Object();
|
|
|
param.list = list;
|
|
|
param.code = $("#txt_code").val();
|
|
|
$.ajax({
|
|
|
url: "cp_productservice.asmx/SaveImgRar",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
dataType: "json",
|
|
|
//async:false,
|
|
|
success: function (data) {
|
|
|
if (data.d != null) {
|
|
|
alert("打包完成，可以点击下载");
|
|
|
$("#a_tp").show();
|
|
|
$("#a_tp").attr("href", data.d);
|
|
|
// var params = { FilePath: data.d, FileName: "图片导出.rar" };
|
|
|
// Window.location ="../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<table width="100%" class="tableAll">
|
|
|
<tr>
|
|
|
<td class="f1" width="20%">货号：</td>
|
|
|
<td>
|
|
|
<input id="txt_code" type="text" />
|
|
|
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td class="f1" >主图：</td>
|
|
|
<td>
|
|
|
<h3>可将要上传的图片拖拽到下框中,图片可以拖动排序
|
|
|
|
|
|
|
|
|
<%-- <button onclick="addimg()" class="btn btn-primary radius">增加图片</button>--%>
|
|
|
</h3>
|
|
|
<div id="drop_area"></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2">
|
|
|
<div class=""> <button onclick="deleteimg();" class="layui-btnblue" style="display:none" id="img_del">批量删除</button><input class="checkbox" name="" type="checkbox" value="全选" id="chk_all" />全选 <button onclick="deleteimg2();" class="layui-btnblue" style="display:none">批量删除</button> <button onclick="SaveImgList2();" class="layui-btnblue">打包图片</button> <a id="a_tp2" href="#" style="color:blue;cursor:pointer;display:none">点击下载图片</a>
|
|
|
</div>
|
|
|
<div class="cl imglist" id="img_ul"></div>
|
|
|
|
|
|
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr><td class="f1" >详情图：</td>
|
|
|
<td>
|
|
|
<h3>可将要上传的图片拖拽到下框中,图片可以拖动排序</h3>
|
|
|
<div id="drop_area2"></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2"> <div class=""><input class="checkbox" name="" type="checkbox" value="全选" id="chk_all2" />全选 <button onclick="deleteimg2();" class="layui-btnblue" id="img_del2">批量删除</button> <button onclick="SaveImgList();" class="layui-btnblue">打包图片</button> <a id="a_tp" href="#" style="color:blue;cursor:pointer;display:none">点击下载图片</a>
|
|
|
</div>
|
|
|
<div id="img_ul2" class="cl imglist" ></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr><td align="center" colspan="2"> <button onclick="GetSort()" class="layui-btnblue">保存图片</button></td></tr>
|
|
|
</table>
|
|
|
</body>
|
|
|
</html>
|
