如何为 HTML 中的文件输入设置值？

Posted 2023-02-23

【中文标题】如何为 HTML 中的文件输入设置值？

【英文标题】：How to set a value to a file input in HTML?

【发布时间】：2010-12-14 09:21:21

【问题描述】：

如何设置 this 的值？

<input type="file" />

【问题讨论】：

我在这里做了一个完整的参考和最新的（2013 年 12 月）回答：Remember and Repopulate File Input

1) 文件输入中的默认值问题不是“出于安全原因完成”，而是浏览器“只是没有实现它，没有充分的理由”：见deep report 2 ) 一个简单的解决方案是在文件输入的基础上使用文本输入，like here。当然，您需要一些代码来发送文件，现在使用文本输入中的值而不是文件输入。就我而言，做 HTA 应用，这不是问题，我根本不使用表单。

【参考方案1】：

出于安全原因，您不能这样做。

想象一下：

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

您不希望您访问的网站能够做到这一点，是吗？ =)

【参考方案2】：

你不能。

设置文件输入值的唯一方法是由用户选择一个文件。

这样做是出于安全原因。否则，您将能够创建一个自动从客户端计算机上传特定文件的 javascript。

【讨论】：

如果我想将文件输入的值设置为一些生成的内容（不是来自磁盘）怎么办？

@EugeneMala：文件输入的值是用户选择的文件。您不能将任何其他内容放入该值中。

【参考方案3】：

不是您问题的答案（其他人已回答），但如果您想对上传的文件字段进行一些编辑功能，您可能想要做的是：

仅通过打印文件名或 URL、可点击的下载链接或图像来显示此字段的当前值：仅显示它，可能是缩略图 <input> 标签上传新文件 一个复选框，选中时会删除当前上传的文件。请注意，无法上传“空”文件，因此您需要这样的东西来清除字段的值

【讨论】：

我想这就是我需要的。如果我想编辑产品信息（不想更改产品图片），我应该如何将<input type="file" /> 设置为现有产品图片？ 我可以在<img /> 标签中显示现有图片，但是当我提交时文件未通过。

@Partho63 为什么要重新上传？如果这是因为表单强制字段验证，如果图像已经上传，您可以以某种方式将文件输入标记为不需要。

【参考方案4】：

你不能。这是一种安全措施。想象一下，如果有人编写了将文件输入值设置为某些敏感数据文件的 JS？

【参考方案5】：

正如这里的其他人所说：您不能使用 JavaScript 自动上传任何文件。

但是！如果您有权访问要在代码中发送的信息（即不是C:\passwords.txt），那么您可以将其上传为blob -type，然后将其视为文件。

服务器最终看到的内容与实际设置<input type="file" /> 值的人无法区分。最终，诀窍是使用服务器开始一个新的XMLHttpRequest()...

function uploadFile (data) 
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);
    
        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');
        
        // action after uploading happens
    xhr.onload = function(e) 
        console.log("File uploading completed!");
    ;
    
        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);


    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile('hello!':'how are you?');

那么，你可以用它来做什么？ 我用它来上传html5 canvas elements 为 jpg 的。这让用户不必打开file input 元素，只选择他们刚刚调整大小、修改等的本地缓存图像。但它应该适用于任何文件类型。

【讨论】：

这正是重点：您不要尝试操纵“经典” HTML 表单提交（并在输入上动态设置文件），而是通过 JS 提交整个表单（包括其他输入字段文本等）。最后，只有一个基于 JS 的请求（POST），而不是一个“经典”提交。我想这个帖子的许多读者正是因为这些信息。

【参考方案6】：

我已经为输入文件的加载 URL 和预览编写了完整的示例 你可以在这里查看 1 https://vulieumang.github.io/vuhocjs/file2input-input2file/

总之你可以使用这个功能

function loadURLToInputFiled(url)
  getImgURL(url, (imgBlob)=>
    // Load img blob to input
    // WIP: UTF8 character error
    let fileName = 'hasFilename.jpg'
    let file = new File([imgBlob], fileName,type:"image/jpeg", lastModified:new Date().getTime(), 'utf-8');
    let container = new DataTransfer(); 
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    
  )

// xmlHTTP return blob respond
function getImgURL(url, callback)
  var xhr = new XMLHttpRequest();
  xhr.onload = function() 
      callback(xhr.response);
  ;
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();

【参考方案7】：

在html中定义：

<input type="hidden" name="image" id="image"/>

在 JS 中：

ajax.jsonRpc("/consulta/dni", 'call', 'document_number': document_number)
    .then(function (data) 
        if (data.error)
            ...;
        
        else 
            $('#image').val(data.image);
        
    )

之后：

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

【讨论】：

看起来您正在使用 ajax 调用上传 HTML 元素的值。这与设置 input type="file" 元素的值非常不同。

【参考方案8】：

其实我们可以做到。 我们可以使用 FormToMultipartPostData Library 在 c# 中使用 webbrowser 控件来设置文件值默认值。我们必须下载这个库并将其包含在我们的项目中。 Webbrowser 使用户能够在表单内浏览网页。 加载网页后，将执行 webBrowser1_DocumentCompleted 中的脚本。 所以，

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    

请参考以下链接进行下载和完整参考。

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com

【讨论】：

这是什么语言的？这不是 javascript。

在我看来像 C#