编辑表单中如何正确展示用户此前上传的图片及对应文件名

错误原因分析 #

• 浏览器安全限制禁止直接加载本地磁盘路径的文件，你拿到的E:\projects\fis\UI\Files\98570125698.jpg是服务器本地存储路径，用户侧浏览器无法直接访问该路径资源
• type="file"类型的输入框出于安全限制，不允许通过JS手动设置value值，避免恶意网页静默窃取用户本地文件

可行解决方案 #

第一步：调整后端返回字段 #

不要返回服务器本地磁盘路径，把ImagePath改成站点可访问的Web路径。比如你的站点根目录映射了E:\projects\fis\UI\目录，就返回/Files/98570125698.jpg；如果是跨域存储的资源，就返回完整的可访问URL，例如https://你的站点域名/Files/98570125698.jpg。

第二步：修改前端赋值逻辑 #

你现有的#i_targetImg本身就是img标签，不需要嵌套新的img节点，直接修改src属性即可；文件名不要往file输入框里塞，放到你预留的#description节点展示就行：

const imgData = data.firm_model[0];
// 给预览图设置可访问的路径
$('#i_targetImg').attr('src', imgData.ImagePath);
// 展示历史文件名
$('#description').text(imgData.ImageTitle);
// 显示预览区块
$('#i_imagePrvw').show();
// file输入框保持为空即可，不需要赋值

如果需要在file输入框旁也显示历史文件名，可以在现有input代码后新增一个展示节点：

<input type="file" class="form-control" id="ImageFile" required name="ImageFile" accept="image/*">
<span id="oldFileName" style="margin-left:10px;color:#666;"></span>

JS里补充赋值即可：

$('#oldFileName').text('已上传：' + imgData.ImageTitle);

第三步：兼容表单提交逻辑 #

后端处理编辑表单提交时，增加判断逻辑：

• 如果本次请求上传了新的图片，就用新的图片信息覆盖原来的存储记录
• 如果本次没有上传新的图片，直接保留数据库中原来的图片信息不修改即可

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