如何将 HTML 输入的文件设置为客户端磁盘文件系统路径的值？

Question

如何设置这个值？

<input type="file" />

Answer 1

出于安全原因，您无法将其设置为客户端磁盘文件系统路径。

想象一下：

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

您不希望您访问的网站能够执行此操作，是吗？ =)

您只能将其设置为可公开访问的 Web 资源，如此答案所示，但这显然与客户端磁盘文件系统路径不同，因此在该上下文中毫无用处。

Answer 2

你不能。

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

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

Answer 3

我编写了一个完整的示例，它将 URL 加载到文件输入并显示预览。 你可以在这里查看 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();
}

Answer 4

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

• 仅通过打印文件名或 URL、可单击的下载链接来显示此字段的当前值，或者如果它是图像：只需显示它，可能作为缩略图

• <input>

  标签上传新文件
• 一个复选框，选中后将删除当前上传的文件。请注意，无法上传“空”文件，因此您需要这样的内容来清除字段的值

Answer 5

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

Answer 6

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

但是！ 如果您有权访问要在代码中发送的信息（即不是

C:\passwords.txt

），那么您可以将其作为 blob 类型上传，然后将其视为文件。

服务器最终看到的内容与实际设置

<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 画布元素作为 jpg 的。这为用户节省了必须打开

file

input

元素，仅选择刚刚调整大小、修改等的本地缓存图像的麻烦。但它应该适用于 any 文件类型。

Answer 7

这个主题很古老，但我认为有人可能需要这个答案！

<input type="file" />
    
    <script>
        // Get a reference to our file input
        const fileInput = document.querySelector('input[type="file"]');
    
        // Create a new File object
        const myFile = new File(['Hello World!'], 'myFile.txt', {
            type: 'text/plain',
            lastModified: new Date(),
        });
    
        // Now let's create a DataTransfer to get a FileList
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(myFile);
        fileInput.files = dataTransfer.files;
    </script>

Answer 8

您需要创建一个 DataTransfer 并设置输入的 .files 属性。

const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);//your file(s) reference(s)
document.getElementById('input_field').files = dataTransfer.files;

Answer 9

在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>

Answer 10

其实我们可以做到。 我们可以使用 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