如何用JS或jQuery修改input file的图片值？遇设置失败问题

你尝试的$("#uploadImg").val(urlImage)确实是错误的，而且这是浏览器安全机制限制导致的——出于隐私和安全考虑，浏览器不允许JavaScript（包括JQuery）直接设置type="file"的input元素的value值，唯一能设置的是空字符串（用来清空已选文件）。

你看到的报错Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement'就是这个限制的直接体现。

另外你提到的C:\fakepath\wp2429207-evil-morty-wallpapers.png也不是真实的本地文件路径，这是浏览器刻意隐藏真实路径后返回的伪路径，目的是防止JS获取到用户本地文件系统的结构信息，所以哪怕你尝试设置这个伪路径也是无效的。

那该怎么实现你的需求？ #

通常这种场景是想展示一张已有的图片（比如用户之前上传到服务器的图片），或者模拟文件选择的效果，正确的做法是：

1. 展示已有图片（而非修改file input） #

不需要修改file input的value，而是添加一个图片预览标签来展示目标图片，同时可以保留file input让用户重新选择新图片，或者用隐藏字段提交已有图片的路径：

<!-- 原有的file input -->
<input type="file" style="margin:auto" class="form-control form-control-file" id="uploadImg" name="uploadImg" accept="image/*" required="">
<!-- 新增预览图片容器 -->
<img id="imagePreview" src="" alt="图片预览" style="display: none; max-width: 200px; margin-top: 10px;">

// 假设你要展示的服务器图片路径是 "/path/Image"
const targetImageUrl = "/path/Image";

// 显示预览图片
$("#imagePreview").attr("src", targetImageUrl).show();

// 如果需要在表单提交时带上这个已有图片的路径，添加隐藏input
$('<input>').attr({
    type: 'hidden',
    name: 'existingImagePath',
    value: targetImageUrl
}).appendTo('form');

2. 触发用户手动选择文件（如果需要让用户选择特定文件） #

如果你的需求是让用户选择某个文件，只能通过触发file input的点击事件，让用户手动选择，不能直接指定路径：

// 触发file input的点击事件，让用户选择文件
$("#uploadImg").click();

允许的操作：清空file input #

唯一能通过JS设置file input value的情况是清空已选文件：

$("#uploadImg").val(""); // 这是合法的

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