如何设置 this 的值？
<input type="file" />
【问题讨论】：
标签： javascript html file-upload preset
出于安全原因，您不能这样做。
想象一下：
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
您不希望您访问的网站能够做到这一点，是吗？ =)
【讨论】：
你不能。这是一种安全措施。想象一下，如果有人编写了将文件输入值设置为某些敏感数据文件的 JS？
【讨论】：
你不能。
设置文件输入值的唯一方法是由用户选择一个文件。
这样做是出于安全原因。否则，您将能够创建一个自动从客户端计算机上传特定文件的 JavaScript。
【讨论】：
不是您问题的答案（其他人已回答），但如果您想对上传的文件字段进行一些编辑功能，您可能想要做的是：
<input> 标签上传新文件【讨论】：
<input type="file" /> 设置为现有产品图片？ 我可以在<img /> 标签中显示现有图片，但是当我提交时文件未通过。
其实我们可以做到。 我们可以使用 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
【讨论】：
在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>
【讨论】：
input type="file" 元素的值非常不同。
正如这里的其他人所说：您不能使用 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 元素，只需要选择他们刚刚调整大小、修改等的本地缓存图像。但它应该适用于任何文件类型。
【讨论】：
我已经为输入文件的加载 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();
}
【讨论】：