<!DOCTYPE html>
<meta charset="UTF-8">
<div class="easyui-layout" data-options="fit:
true,border:false">
<div data-options="region:'center',border:false" style="overflow: hidden;">
<div style="padding: 20px;">
<!-- 文件选择区域 -->
<div style="border: 2px dashed #ddd; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
<div style="text-align: center; margin-bottom: 15px;">
<input type="file" id="fileInput" multiple accept="image/*,.doc,.docx,.pdf,.txt" style="display: none;">
<button id="selectBtn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; cursor: pointer; border-radius: 4px;">选择文件</button>
<button id="uploadBtn" style="padding: 10px 20px; background: #2196F3; color: white; border: none; cursor: pointer; border-radius: 4px; margin-left: 10px; display: none;">上传文件</button>
<p style="margin: 10px 0; color: #666;">支持图片、文档和视频格式（.jpg、.png、.gif、.pdf、.doc、.docx、.txt、.mp4、.avi、.flv）</p>
</div>
<!-- 进度条 -->
<div id="uploadProgress" style="margin: 15px 0; display: none;">
<div style="background: #f0f0f0; height: 20px; border-radius: 10px; overflow: hidden;">
<div id="progressBar" style="background: #4CAF50; height: 100%; width: 0%; transition: width 0.3s;"></div>
</div>
<div id="progressText" style="text-align: center; margin-top: 5px;">0%</div>
</div>
<!-- 图片预览区域 -->
<div id="imagePreview" style="display:
flex;
flex-wrap: wrap; gap: 15px; justify-content:
flex-start; min-height: 50px;"></div>
<!-- 文件列表 -->
<div id="fileListContainer" style="margin-top: 20px; display: none;width:99%;height:300px;overflow-y: scroll;" data-options="region:'center',border:false">
<h4 style="margin: 10px 0; color: #333;">已上传文件</h4>
<table id="IDJWAPYQMB" data-options="fit:
true" ></table>
</div>
</div>
</div>
</div>
<div data-options="region:'south',border:
true" style="height: 36px;text-align: right;vertical-align: middle;padding: 3px;overflow: hidden;">
<a id="IDIJ7YRUFN" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:
true,iconCls:'icow-Apply'">确定</a>
<a id="IDIJ7YS60P" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:
true,iconCls:'icon-cancel'">取消</a>
</div>
</div>
<script type="text/javascript">
$(function(){
var params = vsparams();
var _grid = null;
var uploadedFiles = [];
var selectedFiles = [];
var isUploading = false;
// 允许的文件类型
var allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'doc', 'docx', 'pdf', 'txt','mp4','avi','flv'];
var allowedMimeTypes = [
'image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/pdf',
'text/plain',
// 👇 添加视频 MIME 类型
'video/mp4',
'video/x-msvideo', // .avi
'video/x-flv' // .flv
];
// 验证文件类型
function isValidFile(file) {
var fileName = file.name.toLowerCase();
var extension = fileName.substring(fileName.lastIndexOf('.') + 1);
// 检查扩展名
if (!allowedExtensions.includes(extension)) {
return false;
}
// 如果没有 type，仅靠扩展名判断（兼容性更强）
if (!file.type) return
true;
// 检查 MIME 类型
if (file.type.startsWith('image/') ||
file.type.startsWith('video/') ||
allowedMimeTypes.includes(file.type)) {
return
true;
}
return false;
}
//判断是否有上传的图片
if(params){
vsportal("ZdAction.getFilesById", {ids:params.value}, function (res) {
if (res.code == 200) {
var ArrFiles = res.data
ArrFiles.forEach(item =>{
var fileInfo = {
id: item.id,
name: item.id,
ftype: getFileType(item.name),
fsize: formatFileSize(item.fsize),
objectKey: item.path
};
if(item.path.includes('https://data-migration-prod-2025.obs.cn-south-1.myhuaweicloud.com/')){
fileInfo.value = item.path
uploadedFiles.push(fileInfo)
}else{
fileInfo.value = 'https://data-migration-prod-2025.obs.cn-south-1.myhuaweicloud.com/' + item.path
uploadedFiles.push(fileInfo)
}
})
finishUpload();
}
});
}
// 选择文件按钮
$('#selectBtn').on('click', function(){
$('#fileInput').click();
});
// 文件选择事件 - 验证文件类型
$('#fileInput').on('change', function(e){
var files = Array.from(e.target.files);
if(files.length === 0) return;
var validFiles = [];
var invalidFiles = [];
files.forEach(function(file) {
if (isValidFile(file)) {
validFiles.push(file);
} else {
invalidFiles.push(file.name);
}
});
if (invalidFiles.length > 0) {
vsalert('以下文件格式不支持，已自动过滤：\n' + invalidFiles.join('\n') + '\n\n仅支持：图片（jpg、png、gif等）和文档（doc、docx、pdf、txt）');
}
if (validFiles.length > 0) {
selectedFiles = selectedFiles.concat(validFiles);
displayImagePreviews();
$('#uploadBtn').show();
}
$(this).val('');
});
// 上传按钮点击事件
$('#uploadBtn').on('click', function(){
if(selectedFiles.length === 0) {
vsalert('请先选择文件！');
return;
}
if(isUploading) {
vsalert('文件正在上传中，请稍候...');
return;
}
uploadFilesToOBS(selectedFiles);
});
// 显示图片预览
function displayImagePreviews() {
var previewContainer = $('#imagePreview');
previewContainer.empty();
selectedFiles.forEach(function(file, index) {
var imageDiv = $('<div>').css({
'position': 'relative',
'display': 'inline-block',
'margin': '5px',
'
flex': '0 0 auto'
});
if (file.type.startsWith('image/')) {
var reader = new FileReader();
reader.onload = function(e) {
var img = $('<img>').attr('src', e.target.result).css({
'width': '120px',
'height': '120px',
'object-fit': 'cover',
'border': '2px solid #ddd',
'border-radius': '6px',
'display': 'block'
});
imageDiv.append(img);
};
reader.readAsDataURL(file);
} else if (file.type.startsWith('video/')) {
var videoIcon = $('<div>').css({
'width': '120px',
'height': '120px',
'border': '2px solid #ddd',
'border-radius': '6px',
'display': '
flex',
'align-items': 'center',
'justify-content': 'center',
'background': '#f5f5f5',
'position': 'relative'
}).html(`
<svg viewBox="0 0 24 24" style="width:60px;height:60px;color:#1976D2">
<path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
</svg>
`);
imageDiv.append(videoIcon);
} else {
var fileIcon = $('<div>').css({
'width': '120px',
'height': '120px',
'border': '2px solid #ddd',
'border-radius': '6px',
'display': '
flex',
'align-items': 'center',
'justify-content': 'center',
'background': '#f5f5f5'
}).html('<div style="text-align: center; padding: 10px; word-break: break-all; font-size: 12px;">' + file.name + '</div>');
imageDiv.append(fileIcon);
}
var deleteBtn = $('<button>×</button>').css({
'position': 'absolute',
'top': '-8px',
'right': '-8px',
'width': '24px',
'height': '24px',
'border-radius': '50%',
'background': '#ff4444',
'color': 'white',
'border': 'none',
'cursor': 'pointer',
'font-size': '14px',
'font-weight': 'bold',
'line-height': '1',
'z-index': '10'
}).on('click', function() {
removeSelectedFile(index);
});
var fileName = $('<div>').text(file.name.length > 15 ? file.name.substr(0, 15) + '...' : file.name).css({
'text-align': 'center',
'margin-top': '5px',
'font-size': '12px',
'color': '#666',
'width': '120px',
'overflow': 'hidden'
});
imageDiv.append(deleteBtn, fileName);
previewContainer.append(imageDiv);
});
}
// 删除选
中的文件
function removeSelectedFile(index) {
selectedFiles.splice(index, 1);
displayImagePreviews();
if(selectedFiles.length === 0) {
$('#uploadBtn').hide();
}
}
// 上传文件到OBS
function uploadFilesToOBS(files) {
console.log(files,'222')
if (files.length === 0) return;
isUploading =
true;
$('#uploadBtn').text('上传中...').prop('disabled',
true);
$('#uploadProgress').show();
var totalUploaded = 0;
var totalFiles = files.length;
files.forEach(function(file, index) {
var formData = new FormData();
formData.append('file', file);
console.log(formData,'-------')
$.ajax({
url: '/api/obs/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(res) {
totalUploaded++;
updateProgress(totalUploaded, totalFiles);
if (res.data ) {
var fileInfo = {
id: res.data.id,
name: res.data.id,
ftype: getFileType(res.data.fileName),
fsize: formatFileSize(res.data.fileSize),
value: res.data.objectUrl,
objectKey: res.data.objectKey,
isImage: file.type.startsWith('image/')
};
console.log("fileInfo",fileInfo)
uploadedFiles.push(fileInfo);
console.log('文件上传成功:', fileInfo);
} else {
console.error('上传失败:', res.message);
vsalert('上传失败: ' + res.message);
}
if (totalUploaded === totalFiles) {
finishUpload();
}
},
error: function() {
totalUploaded++;
updateProgress(totalUploaded, totalFiles);
if (totalUploaded === totalFiles) {
finishUpload();
}
}
});
});
}
// 完成上传后的处理
function finishUpload() {
selectedFiles = [];
displayImagePreviews();
setTimeout(function() {
$('#uploadProgress').hide();
isUploading = false;
$('#uploadBtn').text('上传文件').prop('disabled', false).hide();
refreshFileGrid();
}, 800);
}
function updateProgress(completed, total) {
var percent = Math.round((completed / total) * 100);
$('#progressBar').css('width', percent + '%');
$('#progressText').text(completed + '/' + total + ' (' + percent + '%)');
}
function getFileType(filename) {
var ext = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) return '图片';
if (['doc', 'docx', 'pdf', 'txt'].includes(ext)) return '文档';
return '其他';
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 B';
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function refreshFileGrid() {
console.log(uploadedFiles,'-----')
if (_grid && uploadedFiles.length > 0) {
$('#fileListContainer').show();
_grid.
datagrid('loadData', uploadedFiles);
} else {
$('#fileListContainer').hide();
}
}
// 确定按钮
$('#IDIJ7YRUFN').on('click', function(){
try{
if(isUploading){
vsalert('文件正在上传中，请稍候...');
return false;
}
if(uploadedFiles.length == 0){
vsalert('没有上传文件！');
return false;
}
var names = uploadedFiles.map(function(item) { return item.name; });
var values = uploadedFiles.map(function(item) { return item.value; });
vsclose({
names: uploadedFiles.map(function(item) { return item.id; }).join(','),
values: uploadedFiles.map(function(item) { return item.id; }).join(','),
files: uploadedFiles
});
}catch(e){
vsalert('温馨提示：', '获取文件信息失败！', 'error');
}
});
// 取消按钮
$('#IDIJ7YS60P').on('click', function(){
vsclose(false);
});
// 初始化文件列表
vsdelay(function(cxt){
_grid = cxt.find('#IDJWAPYQMB');
_grid.
datagrid({
fitColumns:
true,
pagination:false,
singleSelect:
true,
rownumbers:
true,
columns:[[
{field:'name', title:'文件名称', formatter: function(value, row, index){
if (row.isImage || (row.value && /\.(jpg|jpeg|png|gif|webp)$/i.test(row.value))) {
return '<div style="display:
flex; align-items: center;">' +
'<img src="' + row.value + '" style="width:40px;height:40px;margin-right:10px;object-fit:cover;border-radius:4px;"/> ' +
'<span>' + value + '</span></div>';
}
else if (row.value && /\.(mp4|avi|flv)$/i.test(row.value)) {
return '<div style="display:
flex; align-items: center;">' +
'<span style="margin-right:10px; font-size:20px; color:#1976D2">▶</span> ' +
'<a href="' + row.value + '" target="_blank" style="text-decoration:underline">' + value + '</a></div>';
}
else {
return value;
}
}},
{field:'ftype', title:'类型', width:80},
{field:'fsize', title:'大小', width:100},
{field:'id', title:'操作', width:200, formatter: function(value, row, index){
return '<a href="#" onclick="removeUploadedFile(' + index + ');return false;">删除</a>';
}}
]],
data: uploadedFiles
});
});
// 删除已上传文件
window.removeUploadedFile = function(index) {
uploadedFiles.splice(index, 1);
refreshFileGrid();
};
});
</script>修改完以后选择视频的时候无法选择，只能选择图片这些
本文探讨了在使用datagrid时遇到的问题：即使设置了wordWrap为True，文本换行仍可能不起作用的情况。原因在于datagrid默认所有行高度相同，当内容宽度不足时，换行效果无法体现。解决方案是在datagrid中启用variableRowHeight属性，允许各行列高自适应。
扫一扫
6224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
