获取HTML表格行文件输入路径及更新MySQL表问题求助

核心逻辑说明 #

浏览器确实禁止获取本地文件的真实物理路径，这是浏览器的安全规范。正确的实现流程是：

• 用户选择本地图片后，前端通过FileReader实现图片预览（可选）
• 用FormData将文件发送到后端服务器
• 后端把文件保存到服务器的静态资源目录
• 后端将新的文件存储路径更新到MySQL表
• 后端返回成功信息，前端同步更新页面显示

前端代码修正 #

你的现有代码存在几个关键问题：循环生成的元素使用了重复id（比如slshow_img、img_file），导致交互时只会触发第一个元素；get_filename函数未正确接收event参数；缺少文件上传的核心逻辑。以下是修正后的代码：

<tbody>
  <% if(data.length){ for(var i = 0; i< data.length; i++) {%>
    <tr data-prodid="<%=data[i].prod_id%>"> 
      <td><%=data[i].prod_id%></td>
      <td><img src="<%=data[i].slshow_img_file%>" class="slshow_img" width="100"/></td>
      <td><button style="display:block;width:160px; height:21px;" class="chg_file_btn">选择图片</button></td>
      <td><input type="file" class="img_file" name="img_file" accept='image/*' style="display:none;"></td>
      <td><button type="button" class="chg_img_btn">更换图片</button></td>
      <td><button class="del_img_btn">移除该产品</button></td>
    </tr> 
  <% }} %>
</tbody>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
  // 绑定选择图片按钮点击事件
  $('.chg_file_btn').on('click', function() {
    $(this).closest('tr').find('.img_file').click();
  });

  // 文件选择后预览图片
  $('.img_file').on('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(event) {
      $(e.target).closest('tr').find('.slshow_img').attr('src', event.target.result);
    };
    reader.readAsDataURL(file);
  });

  // 提交图片更换请求
  $('.chg_img_btn').on('click', function() {
    const $tr = $(this).closest('tr');
    const prodId = $tr.data('prodid');
    const fileInput = $tr.find('.img_file')[0];
    const file = fileInput.files[0];
    if (!file) {
      alert('请先选择图片');
      return;
    }

    // 构建FormData对象
    const formData = new FormData();
    formData.append('prod_id', prodId);
    formData.append('img_file', file);

    // 发送AJAX请求到后端
    $.ajax({
      url: '/update-slideshow-img', // 替换为你的后端接口地址
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(res) {
        if (res.success) {
          alert('图片更换成功');
          $tr.find('.slshow_img').attr('src', res.newImgPath);
          fileInput.value = ''; // 清空文件选择器
        } else {
          alert('图片更换失败：' + res.msg);
        }
      },
      error: function() {
        alert('请求失败，请稍后重试');
      }
    });
  });
});
</script>

后端处理示例（Node.js/Express + MySQL） #

以下是Node.js+Express的后端实现示例，你可以根据自己使用的后端语言（PHP/Java等）调整逻辑：

const express = require('express');
const multer = require('multer'); // 处理文件上传的库
const mysql = require('mysql2');
const path = require('path');
const fs = require('fs');

const app = express();

// 配置文件上传存储规则
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    // 确保uploads目录存在，不存在则自动创建
    const uploadDir = path.join(__dirname, 'public/uploads');
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: function(req, file, cb) {
    // 生成唯一文件名，避免覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

// 配置MySQL连接
const db = mysql.createConnection({
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '你的数据库名'
});

db.connect();

// 处理图片更新的接口
app.post('/update-slideshow-img', upload.single('img_file'), (req, res) => {
  const prodId = req.body.prod_id;
  if (!req.file) {
    return res.json({ success: false, msg: '未上传文件' });
  }

  // 生成前端可访问的图片相对路径
  const newImgPath = '/uploads/' + req.file.filename;

  // 更新MySQL表
  const sql = 'UPDATE 你的轮播表名 SET slshow_img_file = ? WHERE prod_id = ?';
  db.query(sql, [newImgPath, prodId], (err, result) => {
    if (err) {
      console.error(err);
      return res.json({ success: false, msg: '数据库更新失败' });
    }
    if (result.affectedRows === 0) {
      return res.json({ success: false, msg: '未找到对应产品' });
    }
    res.json({ success: true, newImgPath: newImgPath });
  });
});

// 配置静态资源目录，让前端可以访问上传的图片
app.use(express.static('public'));

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

关键注意事项 #

• 静态资源配置：确保后端将存放图片的目录（比如示例中的public/uploads）设置为静态资源目录，否则前端无法访问上传的图片。
• 文件校验：后端可额外验证上传文件的类型和大小，防止恶意文件上传。
• 文件名唯一性：必须生成唯一文件名，避免不同用户上传同名文件导致覆盖。
• 数据库字段：确保你的MySQL表包含prod_id（产品ID）和slshow_img_file（图片路径）字段，且prod_id为唯一标识。

内容的提问来源于stack exchange，提问作者user16617036