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

IT技术 javascript html file-upload preset
2021-01-10 20:10:21

我该如何设置这个值?

<input type="file" />
6个回答

出于安全原因,您不能。

想象:

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

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

你不能。

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

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

@EugeneMala:文件输入的值是用户选择的文件。您不能在值中放入任何其他内容。
2021-03-10 20:10:21
如果我想将文件输入的值设置为某些生成的内容(不是来自磁盘)怎么办?
2021-03-27 20:10:21

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

  • 显示该字段的当前值,只需打印文件名或 URL、可点击的下载链接,或者如果它是图像:只需显示它,可能作为缩略图
  • <input>上传新文件标签
  • 一个复选框,选中时会删除当前上传的文件。请注意,无法上传“空”文件,因此您需要像这样清除字段值
我想这就是我需要的。如果我想编辑产品信息(不想更改产品图片),我应该如何设置<input type="file" />为现有的产品图片?我可以在<img />标签中显示现有图像,但是当我提交时没有文件通过。
2021-03-27 20:10:21
@Partho63 为什么要重新上传?如果这是因为表单强制字段验证,如果图像已经上传,您可以以某种方式标记不需要的文件输入。
2021-04-06 20:10:21

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

正如这里的其他人所说:您不能使用 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元素的麻烦,只需选择他们刚刚调整大小、修改等的本地缓存图像。但它应该适用于任何文件类型。