You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

771 lines
31 KiB
Plaintext

2 months ago
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OrderPostInfo.aspx.cs" Inherits="TradeManageNew.OrderPost.OrderPostInfo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Order Ship Info</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../themes/New.css?a=1" />
<link rel="stylesheet" type="text/css" href="../themes/DataGrid.css" />
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/DataGrid.js?a=3445" type="text/javascript"></script>
<script src="../Scripts/DataPager.js" type="text/javascript"></script>
<script src="../Scripts/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="../Scripts/Global.js" type="text/javascript"></script>
<script src="../Scripts/jquery.url.js" type="text/javascript"></script>
<script src="../Scripts/WindowLoad.js" type="text/javascript"></script>
<script src="../Scripts/jquery.cookies.min.js" type="text/javascript"></script>
<script src="../Scripts/MaskedTextBox.js" type="text/javascript"></script>
<script src="../Scripts/ajaxfileupload.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/fancybox2.1/source/jquery.fancybox.css?v=2.1.5"
media="screen" />
<script type="text/javascript" src="../Scripts/fancybox2.1/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../Scripts/fancybox2.1/source/jquery.fancybox.js?v=2.1.5"></script>
<script src="../Scripts/DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/highcharts.js"></script>
<script src="../Scripts/kindeditor/kindeditor-min.js" type="text/javascript"></script>
<script src="../Scripts/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var datagrid1 = new nblf.ui.DataGrid("DataGrid1");
var WindowLoadModel = new WindowLoad();
var Id = 0;
$(document).ready(function () {
WindowLoadModel.ApplicationPath = "../";
WindowLoadModel.ControlID = "WindowLoad";
WindowLoadModel.Isbgiframe = true;
WindowLoadModel.Load();
var day1 = new Date();
var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
$("#txt_SDate,#txt_EDate").val(s1);
ajaxInit(WindowLoadModel);
CreateDataGrid();
ReadData();
$("#btn_sch").bind("click", function () {
ReadData();
});
$("#btn_add").bind("click", function () {
Id = 0;
Clear();
fopen();
});
$("#" + datagrid1.TableID + " [CommandName='cmdEdit']").live("click", function () {
var RowIndex = $(this).parentsUntil("tr").parent().attr("index");
var model = datagrid1.Get_Model(RowIndex);
Id = model.ID;
Clear();
$("#add_wareHouse").val(model.WareHouse);
if (model.PostDate != null)
$("#add_shipDate").val(model.PostDate.localeFormat("yyyy-MM-dd"));
$("#add_sku").val(model.SKU);
$("#add_orderCode").val(model.OrderCode);
$("#add_newSKU").val(model.NewSKU);
$("#add_quantity").val(model.Qty);
$("#add_location").val(model.LocationCode);
$("#add_trackCode").val(model.TrackCode);
$("#add_shipState").val(model.PostState);
$("#add_printState").val(model.PrintState);
$("#add_shipQuantity").val(model.PostQty);
$("#add_remark").val(model.Remark);
fopen();
});
$("#btn_Excel1").click(function () {
if ($("#ip_wareHouse").val() == "") {
alert("Import WareHouse can not be empty"); return;
}
if ($("#ip_date").val() == "") {
alert("Import Date can not be empty"); return;
}
ajaxFileUpload();
});
$("#btn_Excel2").click(function () {
var url = '../ServerCookies/ShipOrdersTemplate.xls';
// 创建隐藏的 <a> 元素
var link = document.createElement('a');
link.href = url;
link.download = url.split('/').pop(); // 设置下载文件的名称
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
//上传快递面单图片
$("#uploadImage").click(function () {
var formData = new FormData();
var files = $('#fileInput')[0].files;
if (files.length <= 0) {
return;
}
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
var fileName = files[i].name.toLowerCase();
if (!fileName.endsWith('.png') && !fileName.endsWith('.jpg') && !fileName.endsWith('.jpeg') && !fileName.endsWith('.pdf')) {
alert("Please select image file")
return;
}
}
WindowLoadModel.Show();
$.ajax({
url: "../SysManageServiceNew.asmx/UploadTrackCodeImages",
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (data) {
WindowLoadModel.Hide();
if (data != "" && data.Code == 0) { alert(data.Message); return; }
},
error: function (xhr, status) {
if (status != "success") alert(xhr.responseText);
}
});
});
$('#btn_delete').click(function () {
DeleteSelectData();
})
});
function fopen() {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'href': '#test',
'onComplete': function () {
}
});
}
function Clear() {
$("#add_wareHouse").val("W");
$("#add_shipDate").val("");
$("#add_orderCode").val("");
$("#add_sku").val("");
$("#add_newSKU").val("");
$("#add_quantity").val("");
$("#add_location").val("");
$("#add_trackCode").val("");
$("#add_shipState").val("0");
$("#add_printState").val("0");
$("#add_shipQuantity").val("");
$("#add_remark").val("");
}
//#region 初始化DataGrid
function CreateDataGrid() {
var col = new nblf.ui.DataGridColumn();
col.HeaderText = "WareHouse";
col.CellTemplate = "<span>{Bind WareHouse}</span>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Ship Date";
col.CellTemplate = "<a>{Bind PostDate,yyyy-MM-dd}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "OrderCode";
col.CellTemplate = "<a>{Bind OrderCode}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "SKU";
col.CellTemplate = "<a>{Bind SKU}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "NewSKU";
col.CellTemplate = "<a>{Bind NewSKU}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Quantity";
col.CellTemplate = "<a>{Bind Qty}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "LocationCode";
col.CellTemplate = "<a>{Bind LocationCode}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "TrackCode";
col.Width = "200px";
col.CellTemplate = "<a style='max-width:200px;word-wrap:break-word;display:inline-block;'>{Bind TrackCode}</a>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "label_cost";
col.CellTemplate = "<a>{Bind label_cost}</a>";
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Ship State";
col.SortExpression = "Ship State";
col.CellTemplate = "<span>{Bind PostState}</span>";
col.CellFormatter = function (value) {
switch (value) {
case 2: return "All Ship";
case 1: return "Partial Ship";
default: return "No Ship";
}
};
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Shipped Quantity";
col.CellTemplate = "<span>{Bind PostQty}</span>";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "PrintState";
col.CellTemplate = "<span>{Bind PrintState}</span>";
col.CellFormatter = function (value) {
switch (value) {
case 0: return "UnPrint";
case 1: return "Printing";
case 2: return "Printed";
}
};
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Remark";
col.CellTemplate = "<span>{Bind Remark}</span>";
col.SortExpression = "Remark";
Array.add(datagrid1.Columns, col);
col = new nblf.ui.DataGridColumn();
col.HeaderText = "Options";
col.Width = "150px";
col.CellTemplate = "<input CommandName='cmdEdit' class='btnClass dgbtnEdit' type='button' value='Edit'></input>&nbsp<input onclick='DelCol(this)' class='btnClass dgbtnDel' type='button' value='Delete'></input>";
Array.add(datagrid1.Columns, col);
datagrid1.SetPageSize(200);
datagrid1.SetPageIndex(1);
datagrid1.SortExpression = "Id ";
datagrid1.ViewSortDirection = "desc";
datagrid1.IsFixHeader = true;
datagrid1.ShowIndexColumn = true;
datagrid1.AllowPaging = true;
datagrid1.AllowPaging2 = true;
datagrid1.ShowIndexColumn = true;
datagrid1.Width = "100%";
datagrid1.SelectMode = nblf.ui.SelectMode.CheckBox;
datagrid1.Init();
datagrid1.Sorting(function () {
ReadData();
});
datagrid1.add_PageIndexChanged(function () { ReadData(); });
}
//#endregion
//#region 读取数据
function ReadData() {
debugger;
var param = new Object();
param.searchType = $("#select-searchType").val();
param.searchCode = $("#searchTxt").val();
param.wareHouse = $("#select-wareHouse").val();
param.postState = $("#select-shipState").val();
param.printState = $("#select-printState").val();
param.sDate = $("#txt_SDate").val();
param.eDate = $("#txt_EDate").val();
param.PageSize = datagrid1.Get_PageSize();
param.PageIndex = datagrid1.Get_PageIndex();
WindowLoadModel.Show();
$.ajax({
url: "../PostGoodServiceNew.asmx/GetOrderPostInfoList",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
success: function (data) {
WindowLoadModel.Hide();
datagrid1.Set_RowCount(data.d.RowCount);
datagrid1.DataBind(data.d.DataSource);
}
});
}
//#endregion
function Save() {
var md = new Object();
var param = new Object();
md.ID = Id;
md.WareHouse = $("#add_wareHouse").val();
if ($("#add_shipDate").val() == "") {
alert("Ship Date can not empty");
return;
}
md.PostDate = $("#add_shipDate").val();
if ($("#add_orderCode").val() == "") {
alert("OrderCode can not empty");
return;
}
md.OrderCode = $("#add_orderCode").val();
if ($("#add_sku").val() == "") {
alert("SKU can not empty");
return;
}
md.SKU = $("#add_sku").val();
md.NewSKU = $("#add_newSKU").val();
if ($("#add_quantity").val() == "") {
alert("Quantity can not empty");
return;
}
md.Qty = $("#add_quantity").val();
if ($("#add_location").val() == "") {
alert("LocationCode can not empty");
return;
}
md.LocationCode = $("#add_location").val();
if ($("#add_trackCode").val() == "") {
alert("TrackCode can not empty");
return;
}
md.TrackCode = $("#add_trackCode").val();
md.PostState = $("#add_shipState").val();
md.PrintState = $("#add_printState").val();
md.PostQty = $("#add_shipQuantity").val();
md.Remark = $("#add_remark").val();
param.md = md;
WindowLoadModel.Show();
$.ajax({
url: "../PostGoodServiceNew.asmx/SaveOrderPostInfo",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
success: function (data) {
WindowLoadModel.Hide();
if (data.d.Code == 0) {
alert(data.d.Message);
} else {
ReadData();
$.fancybox.close();
}
}
});
}
function DelCol(obj) {
if (window.confirm('Are you sure to delete it ?') == false) return;
var rowindex = $(obj).parent().parent().attr("index");
var param = new Object();
var model = datagrid1.Get_Model(rowindex);
param.id = model.ID;
$.ajax({
url: "../PostGoodServiceNew.asmx/DeleteOrderPostInfo",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
success: function (data) {
if (data.d.Code == 0) {
alert(data.d.Message);
} else {
ReadData();
}
}
});
}
function ajaxFileUpload() {
var filename = $("#fileToUpload").val();
if (!filename.endsWith('.xls') && !filename.endsWith('.xlsx')) { alert("Please select an Excel file"); return; }
$.ajaxFileUpload({
url: '../GlobalAshx/AjaxFileUpdate.ashx?DirectoryName=ServerCookies',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function (data, status) {
ImportGoods("ServerCookies/" + data.FileName);
},
error: function (data, status, e) {
alert(e);
}
});
}
function ImportGoods(FileName) {
if ($("#ip_wareHouse").val() == "") {
alert("Import WareHouse can not be empty"); return;
}
if ($("#ip_date").val() == "") {
alert("Import Date can not be empty"); return;
}
var param = new Object();
param.wareHouse = $("#ip_wareHouse").val();
param.ipDate = $("#ip_date").val();
param.fileName = FileName;
WindowLoadModel.Show();
$.ajax({
url: "../PostGoodServiceNew.asmx/ImportShipOrderDatas",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
success: function (data) {
WindowLoadModel.Hide();
if (data.d != "") { alert(data.d); ReadData(); return; }
},
error: function (xhr, status) {
if (status != "success") alert(xhr.responseText);
}
});
}
function ExportSelectData() {
var param = new Object();
var selectlist = datagrid1.GetSelectListModel();
if (selectlist == null || selectlist.length == 0) {
alert("Please select the data to export");
return;
}
var ids = "";
$(selectlist).each(function () {
ids += this.ID + ",";
});
param.ids = ids;
param.wareHouse = $("#select-wareHouse").val();
var fname = "PickGoodList.xls";
$.ajax({
url: "../PostGoodServiceNew.asmx/MakePickGoodListForIds",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
if (data.d != null && data.d.Code == 1) {
params = { FilePath: data.d.Message, FileName: fname };
window.location = "../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
ReadData();
alert("Success");
} else {
alert(data.d.Message);
}
}
});
}
function ExportTemuOrderTrackFile() {
var param = new Object();
param.wareHouse = $("#select-wareHouse").val();
param.sDate = $("#txt_SDate").val();
param.eDate = $("#txt_EDate").val();
var currentDate = new Date();
var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 加 1 是因为月份从 0 开始计数
var day = ('0' + currentDate.getDate()).slice(-2);
var fname = $("#select-wareHouse").val() + month + day + ".zip";
debugger;
WindowLoadModel.Show();
$.ajax({
url: "../PostGoodServiceNew.asmx/DownLoadTemuTrackCodeImg",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null && data.d.Code == 1) {
params = { FilePath: data.d.Datas, FileName: fname };
window.location = "../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
alert("导出成功:" + data.d.Message);
} else {
alert(data.d.Message);
}
}
});
}
function ExportAllData() {
var param = new Object();
if ($("#select-wareHouse").val() == "") {
alert("The value of WareHouse must be W or E");
return;
}
param.searchType = $("#select-searchType").val();
param.searchCode = $("#searchTxt").val();
param.wareHouse = $("#select-wareHouse").val();
param.postState = $("#select-shipState").val();
param.printState = $("#select-printState").val();
param.sDate = $("#txt_SDate").val();
param.eDate = $("#txt_EDate").val();
if ($('#fgcheckbox').is(':checked')) {
// 复选框被选中
param.isFG = 1;
} else {
// 复选框未被选中
param.isFG = 0;
}
var fname = "PickGoodList.xls";
WindowLoadModel.Show();
$.ajax({
url: "../PostGoodServiceNew.asmx/MakePickGoodListForAllDatasNew",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null && data.d.Code == 1) {
params = { FilePath: data.d.Message, FileName: fname };
window.location = "../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
ReadData();
alert("Success");
} else {
alert(data.d.Message);
}
}
});
}
function DeleteSelectData() {
var param = new Object();
var selectlist = datagrid1.GetSelectListModel();
if (selectlist == null || selectlist.length == 0) {
alert("Please select the data to delete");
return;
}
var ids = "";
$(selectlist).each(function () {
ids += this.ID + ",";
});
param.ids = ids;
$.ajax({
url: "../PostGoodServiceNew.asmx/DeleteOrderPostInfoForIDs",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
if (data.d != null && data.d.Code == 1) {
ReadData();
} else {
alert(data.d.Message);
}
}
});
}
</script>
</head>
<body class="headbody">
<div class="title_ico">
Ship Orders</div>
<div style="display: none">
<div id="test" title="Order Ship Info" style="width:600px; height:400px;">
<table width="95%" class="tableAll" border="1" ellspacing="0" cellpadding="2">
<tr>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>WareHouse
</td>
<td><select id="add_wareHouse"><option value="W" selected>W</option><option value="E">E</option></select></td>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>Ship Date
</td>
<td>
<input id="add_shipDate" class="editTextbox" onfocus="WdatePicker()" style="width: 120px;" type="text" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>OrderCode
</td>
<td>
<input id="add_orderCode" class="editTextbox" style="width: 120px;" type="text" />
</td>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>SKU
</td>
<td>
<input id="add_sku" class="editTextbox" style="width: 120px;" type="text" />
</td>
</tr>
<tr>
<td style="width: 110px;" class="f1">
NewSKU
</td>
<td>
<input id="add_newSKU" class="editTextbox" style="width: 120px;" type="text" />
</td>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>Quantity
</td>
<td>
<input id="add_quantity" min='0' max='1000000000' precision='0' class="editTextbox" style="width: 120px;" type="text" />
</td>
</tr>
<tr>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>LocationCode
</td>
<td>
<input id="add_location" class="editTextbox" style="width: 120px;" type="text" />
</td>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>TrackCode
</td>
<td>
<input id="add_trackCode" class="editTextbox" style="width: 120px;" type="text" />
</td>
</tr>
<tr>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>Ship State
</td>
<td><select id="add_shipState"><option value="0" selected>No Ship</option><option value="1">Partial Ship</option><option value="2">All Ship</option></select></td>
<td style="width: 110px;" class="f1">
<font color="red" style="font-weight: bolder">*</font>Print State
</td>
<td><select id="add_printState"><option value="0">UnPrint</option><option value="1">Printing</option><option value="2">Printed</option></select></td>
</tr>
<tr>
<td style="width: 110px;" class="f1">
Shipped Quantity
</td>
<td>
<input id="add_shipQuantity" min='0' max='1000000000' precision='0' class="editTextbox" style="width: 120px;" type="text" />
</td>
<td style="width: 110px;" class="f1">
Remark
</td>
<td><input id="add_remark" class="editTextbox" style="width: 120px;" type="text" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<input
id="btn_Save" type="button" class="btnClass btnClassSave" value="Save" onclick="Save();" />
</td>
</tr>
</table>
</div>
</div>
<table id="tb1" class="tableAll" style="width: 100%;">
<tr>
<td class="f1" width="10%"><select id="select-searchType"><option value="1" selected>OrderCode</option><option value="2">SKU</option><option value="3">LocationCode</option><option value="4">TrackCode</option></select></td>
<td><input id="searchTxt" class="editTextbox" style="width: 120px;" type="text" autocomplete="off" /></td>
<td class="f1" width="10%">WareHouse</td>
<td><select id="select-wareHouse"><option value="W" selected>W</option><option value="E">E</option></select></td>
<td class="f1" width="10%">Ship State</td>
<td><select id="select-shipState"><option value="-1" selected>All</option><option value="0">No Ship</option><option value="1">Partial Ship</option><option value="2">All Ship</option></select></td>
<td><input id="btn_sch" class="btnClass btnClassFind" type="button" value="Search" /> <input id="btn_delete" class="btnClass dgbtnDel" type="button" value="Delete Select Data" /></td>
</tr>
<tr>
<td class="f1" width="10%">Print State</td>
<td><select id="select-printState"><option value="-1" selected>All</option><option value="0">UnPrint</option><option value="1">Printing</option><option value="2">Printed</option></select></td>
<td class="f1" width="10%">Ship Date:</td>
<td>
<input id="txt_SDate" class="editTextbox" onfocus="WdatePicker()" style="width: 120px;" type="text" autocomplete="off" />-<input id="txt_EDate" class="editTextbox" onfocus="WdatePicker()" style="width: 120px;" type="text" autocomplete="off" /></td>
<td class="f1" width="10%">
<input id="btn_add" class="btnClass btnClassAdd" type="button" value="Add" />
<input id="fgcheckbox" type="checkbox" name="fuGaiPick" checked />覆盖生成
</td>
<td>
<input id="btn_Download2" type="button" class="btnClass btnClassExcelTemplate" value="All Data Make Pick List" onclick="ExportAllData()" />
</td>
<td>
<%-- <input id="btn_Download1" type="button" class="btnClass btnClassExcelTemplate" value="Select Data Make Pick List " onclick="ExportSelectData()" />--%>
<input id="btn_DownloadTemu" type="button" class="btnClass btnClassExcelTemplate" value="导出TEMU面单" onclick="ExportTemuOrderTrackFile()" />
</td>
</tr>
<tr>
<td >Import WareHouse</td>
<td><select id="ip_wareHouse"><option value="W">W</option><option value="E">E</option></select></td>
<td>Import Date:</td>
<td>
<input id="ip_date" class="editTextbox" onfocus="WdatePicker()" style="width: 120px;" type="text" autocomplete="off" />
</td>
<td >Import Orders</td>
<td>
<input id="fileToUpload" accept="excel/xls" name="fileToUpload" type="file" style="width: 200px" />
</td>
<td>
<input id="btn_Excel1" type="button" class="btnClass btnClassEdit" value="Confirm Import" />
<input id="btn_Excel2" type="button" class="btnClass btnClassEdit" value="Download Template" />
</td>
</tr>
<tr><td >Import TrackCode Images</td><td> <input type="file" id="fileInput" multiple /></td><td><button id="uploadImage">Upload Images</button></td></tr>
<tr>
<td valign="top" colspan="7">
<div id="DataGrid1" class="DataGridStyle"></div>
</td>
</tr>
</table>
</body>
</html>