@ -7,7 +7,7 @@
Passport Information for All the Group Members
< / title >
< meta content = "width=device-width,minimum-scale=1,initial-scale=1" name = "viewport" >
< link href = "https://data.chinahighlights.com/css/min.php?f=/css/customer_center_data/bootstrap.min.css&v=202 405161016 " rel = "stylesheet" >
< link href = "https://data.chinahighlights.com/css/min.php?f=/css/customer_center_data/bootstrap.min.css&v=202 508071547 " rel = "stylesheet" >
< style >
body {
margin: 0;
@ -375,6 +375,8 @@ select.gender_pick {border: 1px solid #d1d1d1;
padding: 0 15px;
width: auto;}
< / style >
< script src = "https://data.chinahighlights.com/js/min.php?f=/js/customer_center_data/jquery.min.js,/js/customer_center_data/bootstrap.min.js,/js/customer_center_data/jquery-ui.min.js&v=202405161016" > < / script >
< / head >
< body >
@ -1060,27 +1062,24 @@ select.gender_pick {border: 1px solid #d1d1d1;
< textarea id = "special_request" name = "special_request" style = "resize:none;" > < / textarea >
< / div >
//
<!-- 🔜上传护照图片 -->
< div id = "inquiryBox" >
< h2 > Please upload your passport photo. (optional)< / h2 >
< div class = "upload-section" >
< div class = "upload-area" id = "uploadArea" >
< p > 点击选择图片或拖拽图片到此处< / p >
< input type = "file" id = "fileInput" accept = "image/*" multiple >
< / div >
< button id = "uploadBtn" > 上传图片< / button >
< input type = "file" id = "fileInput" accept = "image/*" multiple >
< button id = "uploadBtn" > Upload< / button >
< / div >
< div class = "progress-section" id = "progressSection" style = "display: none;" >
< p > 上传中 ...< / p >
< p > uploading ...< / p >
< div class = "progress-bar" >
< div class = "progress-fill" id = "progressFill" > < / div >
< / div >
< / div >
< div class = "uploaded-images" id = "uploadedImages" >
< h2 > 已上传图片 < / h2 >
< h2 > Uploaded image < / h2 >
< div class = "image-grid" id = "imageGrid" >
<!-- 上传的图片将显示在这里 -->
< / div >
@ -1088,138 +1087,160 @@ select.gender_pick {border: 1px solid #d1d1d1;
< / div >
< script >
$(document).ready(function() {
let uploadedFiles = [];
// 点击上传区域触发文件选择
$('#uploadArea').on('click', function() {
$('#fileInput').click();
});
// 文件选择后更新UI
$('#fileInput').on('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
$('#uploadArea p').text(`已选择 ${files.length} 个文件`);
}
});
// 拖拽上传功能
$('#uploadArea').on('dragover', function(e) {
e.preventDefault();
$(this).css('background-color', '#f0f8ff');
});
$('#uploadArea').on('dragleave', function(e) {
e.preventDefault();
$(this).css('background-color', '');
});
$('#uploadArea').on('drop', function(e) {
e.preventDefault();
$(this).css('background-color', '');
const files = e.originalEvent.dataTransfer.files;
$('#fileInput')[0].files = files;
if (files.length > 0) {
$('#uploadArea p').text(`已选择 ${files.length} 个文件`);
}
});
// 上传按钮点击事件
$('#uploadBtn').on('click', function() {
const files = $('#fileInput')[0].files;
const HT3_HOST = 'https://hub.globalhighlights.com/ht3.0'
function checkStatus(response) {
if (response.status >= 200 & & response.status < 300 ) {
return response
} else {
const message =
'Fetch error: ' + response.url + ' ' + response.status + ' (' +
response.statusText + ')'
const error = new Error(message)
error.response = response
throw error
}
}
function fetchJSON(url, data = {}) {
const params = new URLSearchParams(data).toString();
const ifp = url.includes('?') ? '& ' : '?';
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
return fetch(fUrl, {
method: 'GET',
}).then(checkStatus)
.then(response => response.json())
.catch(error => {
throw error;
});
}
const simple_encrypt = text => {
const key = "TPDa*UU8h5%!zS";
let encrypted = [];
let keyIndex = 0;
for (let i = 0; i < text.length ; i + + ) {
const charCode = text.charCodeAt(i);
const keyCharCode = key.charCodeAt(keyIndex);
const encryptedChar = charCode ^ keyCharCode;
encrypted.push(encryptedChar);
keyIndex = (keyIndex + 1) % key.length;
}
return encrypted.map(byte => byte.toString(16).padStart(2, "0")).join("");
};
const uploadOSS = (file, key) => {
fetchJSON(`${HT3_HOST}/oss/signature_unique_key?key=${key}& filename=${file.name}`)
.then(json => {
if (json.errcode === 0) {
const { method, host, signed_headers } = json.result;
fetch(host, {
method,
headers: signed_headers,
body: file,
})
.then(response => {
console.info('response: ', response);
if (response.ok) {
console.info('图片ok');
} else {
console.info('图片上传失败');
}
});
if (files.length === 0) {
alert('请先选择图片文件');
return;
}
// 显示进度条
$('#progressSection').show();
$('#uploadBtn').prop('disabled', true);
// 模拟上传过程
simulateUpload(files, function() {
// 上传完成后隐藏进度条
$('#progressSection').hide();
$('#uploadBtn').prop('disabled', false);
$('#uploadArea p').text('点击选择图片或拖拽图片到此处');
$('#fileInput').val('');
});
});
};
const deleteImage = async key => {
try {
const { errcode } = await fetchJSON(`${HT3_HOST}/oss/delete_unique_key?key=${key}`, {
method: "GET",
});
return errcode === 0;
} catch (error) {
console.error("删除图片失败", error);
return false;
}
};
$(document).ready(function() {
let uploadedFiles = [];
const GRI_SN = <?php echo $group [ 'GRI_SN' ]; ?> ;
const GRI_No = "<?php echo $group [ 'GRI_No' ]; ?> ";
const ossKey = `ghh/${GRI_SN}-${GRI_No}/passport_image`
const encryptKey = simple_encrypt(ossKey);
fetchJSON(`${HT3_HOST}/oss/list_unique_key?key=${encryptKey}`)
.then(json => {
// console.info('json: ', json);
});
// 模拟上传过程
function simulateUpload(files, callback) {
let progress = 0;
const interval = setInterval(function() {
progress += Math.floor(Math.random() * 10) + 1;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// 上传完成后添加到已上传图片列表
for (let i = 0; i < files.length ; i + + ) {
const file = files[i];
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const imageData = {
id: Date.now() + i,
name: file.name,
size: formatFileSize(file.size),
url: e.target.result
};
uploadedFiles.push(imageData);
addImageToGrid(imageData);
};
reader.readAsDataURL(file);
}
}
callback();
}
$('#progressFill').css('width', progress + '%');
}, 100);
$('#fileInput').on('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
}
});
$('#uploadBtn').on('click', function() {
const files = $('#fileInput')[0].files;
// 添加图片到网格
function addImageToGrid(imageData) {
const imageItem = `
< div class = "image-item" data-id = "${imageData.id}" >
< img src = "${imageData.url}" alt = "${imageData.name}" >
< div class = "image-info" >
< h3 > ${imageData.name}< / h3 >
< p > ${imageData.size}< / p >
< button class = "delete-btn" data-id = "${imageData.id}" > 删除< / button >
< / div >
< / div >
`;
$('#imageGrid').append(imageItem);
if (files.length === 0) {
alert('Please select a file.');
return;
}
// 删除图片
$(document).on('click', '.delete-btn', function() {
const id = $(this).data('id');
$(`.image-item[data-id="${id}"]`).remove();
$('#progressSection').show();
$('#uploadBtn').prop('disabled', true);
// 从数组中移除
uploadedFiles = uploadedFiles.filter(file => file.id !== id);
startUpload(files, function() {
$('#progressSection').hide();
$('#uploadBtn').prop('disabled', false);
$('#fileInput').val('');
});
});
function startUpload(files, callback) {
for (let i = 0; i < files.length ; i + + ) {
const file = files[i];
if (file.type.startsWith('image/')) {
const progress = ((i + 1) / files.length) * 100;
uploadOSS(file, encryptKey);
const reader = new FileReader();
reader.onload = function(e) {
const imageData = {
id: Date.now() + i,
name: file.name,
url: e.target.result
};
uploadedFiles.push(imageData);
addImageToGrid(imageData);
};
reader.readAsDataURL(file);
$('#progressFill').css('width', progress + '%');
}
}
callback();
}
// 格式化文件大小
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
function addImageToGrid(imageData) {
const imageItem = `
< div class = "image-item" data-id = "${imageData.id}" >
< img src = "${imageData.url}" alt = "${imageData.name}" >
< div class = "image-info" >
< h3 > ${imageData.name}< / h3 >
< button class = "delete-btn" data-id = "${imageData.id}" > Remove< / button >
< / div >
< / div >
`;
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
$('#imageGrid').append(imageItem);
}
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
$(document).on('click', '.delete-btn', function() {
const id = $(this).data('id');
// const imageKey = $(this).data('key');
$(`.image-item[data-id="${id}"]`).remove();
uploadedFiles = uploadedFiles.filter(file => file.id !== id);
// deleteImage(imageKey);
});
});
< / script >
< style >
@ -1253,12 +1274,8 @@ select.gender_pick {border: 1px solid #d1d1d1;
}
#fileInput {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
@ -1316,8 +1333,8 @@ select.gender_pick {border: 1px solid #d1d1d1;
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25 0px, 1fr));
gap: 2 0px;
grid-template-columns: repeat(auto-fill, minmax(1 20px, 1fr));
gap: 1 0px;
}
.image-item {
@ -1333,7 +1350,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
.image-item img {
width: 100%;
height: 20 0px;
height: 1 20px;
object-fit: cover;
display: block;
}
@ -1370,7 +1387,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
background-color: #c0392b;
}
< / style >
//
<!-- 上传护照图片🔚 -->
< div class = "inquiryBtn" >
< input type = "hidden" name = "toname" value = " <?php echo $userinfo [ 0 ] -> OPI_FirstName ; ?> " >
@ -1406,7 +1423,6 @@ select.gender_pick {border: 1px solid #d1d1d1;
< / div >
< / div >
<!-- reviewModal end -->
< script src = "https://data.chinahighlights.com/js/min.php?f=/js/customer_center_data/jquery.min.js,/js/customer_center_data/bootstrap.min.js,/js/customer_center_data/jquery-ui.min.js&v=202405161016" > < / script >
< script >
function submit_info_form () {
var $btn = $("#btn-add-userinfo").button('loading');
LiaoYijun
8 months ago