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

Question

注意:

下面的答案和评论反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript和dataTransfer或FileList对象实际动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

我该如何设置它的值？

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

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

Answer 2

你不能.

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

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

Answer 3

我编写了一个完整的示例，它将 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();
}

Answer 4

不是您的问题的答案(其他人已经回答),但如果您想要上传文件字段的某些编辑功能,您可能想要做的是:

• 通过打印文件名或URL显示该字段的当前值,可下载的可点击链接,或者如果它是图像:只显示它,可能是缩略图
• <input>用于上传新文件的标签
• 一个复选框,选中此选项后,将删除当前上载的文件.请注意,没有办法上传"空"文件,所以你需要这样的东西来清除字段的值

Answer 5

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

Answer 6

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

然而！ 如果您可以访问要在代码中发送的信息（即 not 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?'});

那么，你可以用它做什么？ 我用它来上传jpg 格式的HTML5 画布元素。这为用户省去了打开file input元素的麻烦，只需选择他们刚刚调整大小、修改等的本地缓存图像。但它应该适用于任何文件类型。

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;