为什么在dedecms织梦会员中心前台自定义图片字段上传后无法选中？

在织梦CMS（DedeCMS）中，实现会员中心前台自定义图片字段上传并能够选中选择的功能，是一个相对复杂的过程，这需要涉及到前端的HTML、JavaScript以及后端的PHP代码编写和数据库操作，以下是详细的步骤和代码示例：

1. 数据库字段添加

需要在数据库中为会员表添加一个自定义的图片字段，例如custom_image。

ALTER TABLEdede_member ADDcustom_image VARCHAR(255) NOT NULL DEFAULT '';

2. 修改会员中心模板文件

需要修改会员中心的模板文件，以便在前端展示图片上传功能，假设模板文件路径为/templets/member/edit_profile.htm。

添加图片上传表单

在编辑资料的表单中添加一个图片上传控件：

<form id="edit_profile_form" method="post" enctype="multipart/formdata">
    ...
    <div class="formgroup">
        <label for="custom_image">自定义图片</label>
        <input type="file" id="custom_image" name="custom_image" accept="image/*">
    </div>
    ...
</form>

3. JavaScript代码处理

使用JavaScript处理图片预览和表单提交：

document.getElementById('edit_profile_form').addEventListener('submit', function() {
    let fileInput = document.getElementById('custom_image');
    let formData = new FormData();
    formData.append('custom_image', fileInput.files[0]);
    // 其他表单数据也可以添加到formData中
    fetch('/include/ajax_upload.php', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
      .then(result => {
          if (result.success) {
              alert('图片上传成功');
          } else {
              alert('图片上传失败');
          }
      });
});

4. 后端处理脚本

创建一个后端处理脚本ajax_upload.php，用于接收上传的文件并保存到服务器：

<?php
if (!empty($_FILES['custom_image'])) {
    $file = $_FILES['custom_image'];
    $fileName = uniqid() . '.' . $file['name'];
    $targetPath = './uploads/' . $fileName;
    move_uploaded_file($file['tmp_name'], $targetPath);
    // 更新会员信息
    include_once './config/config_inc.php'; // 包含配置信息
    include_once './config/database.php'; // 包含数据库连接信息
    include_once './dedetag.class.php'; // 包含DedeCMS核心类
    $dedeTag = new DedeTag();
    $dedeTag>arcID = $_SESSION['mid']; // 当前会员ID
    $dedeTag>Fields['custom_image'] = $fileName;
    $dedeTag>Save();
    echo json_encode(['success' => true]);
    exit;
} else {
    echo json_encode(['success' => false]);
}
?>

5. 显示已上传的图片

在会员资料页面显示已上传的图片：

<div id="uploaded_image"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    let divi = document.getElementById('uploaded_image');
    let img = document.createElement('img');
    img.src = '/uploads/' + '<?php echo $dedeTag>Fields["custom_image"]; ?>';
    divi.appendChild(img);
});
</script>

FAQs

Q1: 如何限制上传图片的大小？

A1: 可以通过JavaScript和PHP来限制上传图片的大小，在JavaScript中，可以检查文件大小：

if (fileInput.files[0].size > MAX_SIZE) {
    alert('文件太大，请重新选择');
    return;
}

在PHP中，可以检查文件大小：

if ($file['size'] > MAX_SIZE) {
    echo json_encode(['success' => false, 'error' => '文件太大']);
    exit;
}

Q2: 如何支持多图上传？

A2: 要支持多图上传，可以将文件输入类型改为multiple，并在后端处理多个文件：

<input type="file" id="custom_images" name="custom_images[]" accept="image/*" multiple>

在PHP中遍历所有上传的文件：

foreach ($_FILES['custom_images']['tmp_name'] as $key => $tmpName) {
    $file = $_FILES['custom_images']['tmp_name'][$key];
    $fileName = uniqid() . '.' . $_FILES['custom_images']['name'][$key];
    $targetPath = './uploads/' . $fileName;
    move_uploaded_file($file, $targetPath);
}