javascript - 我可以使用 val() 插入或编辑文件输入吗？

Question

这个问题已经有答案了:

How to set File objects and length property at FileList object where the files are also reflected at FormData object? (1 个回答)

已关闭 3 年前。

我正在使用 jQuery 为管理面板创建 CRUD。我使用以下形式将“视频”添加到列表中:

因此，当我提交表单时，所有字段都被推送到名为 videos 的数组，并且表单被清除。

当我尝试编辑特定视频并尝试将当前视频的所有值插入表单字段内时，问题就开始了。我正在这样做:

$('#video-title').val(video.videoTitle);
$('#video-segment').val(video.videoSegment);
$('#video-thumbnail').val(video.videoThumbnail);
$('#datepicker3').val(video.videoDate);
$('#video-description').val(video.videoDescription);
$('#bright-id').val(video.videoBrightCoveId);

一切正常，但在视频缩略图(为该特定视频上传的图像)中出现以下错误:

jquery.min.js:2 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at HTMLInputElement.<anonymous> (https://localhost:5001/lib/jquery/jquery.min.js:2:68568)
    at Function.each (https://localhost:5001/lib/jquery/jquery.min.js:2:2777)
    at k.fn.init.each (https://localhost:5001/lib/jquery/jquery.min.js:2:1419)
    at k.fn.init.val (https://localhost:5001/lib/jquery/jquery.min.js:2:68263)
    at HTMLButtonElement.<anonymous> (https://localhost:5001/admin/events/create:1239:35)
    at HTMLTableSectionElement.dispatch (https://localhost:5001/lib/jquery/jquery.min.js:2:42571)
    at HTMLTableSectionElement.v.handle (https://localhost:5001/lib/jquery/jquery.min.js:2:40572)

我的问题是:有办法编辑缩略图字段吗？或者我这样做是不可能的吗？.

Answer 1

您可以使用DataTransfer()设置输入类型文件的值。

例如:

var tst =   new DataTransfer(); 
tst.items.add(new File(['test'], video.videoThumbnail));
video_thumbnail.files = tst.files;

var tst =   new DataTransfer(); 
tst.items.add(new File(['test'], 'yourimage.jpg'));
video_thumbnail.files = tst.files;

 <input type="file"  id='video_thumbnail'>