我该如何设置它的值?
<input type="file" />
我该如何设置它的值?
<input type="file" />
由于安全原因,您不能将其设置为客户端磁盘文件系统路径。
想象一下:
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
你不想访问的网站能够做到这一点,对吧? =)
正如这个答案中所述,您只能将其设置为公共可访问的网络资源,但这显然不同于客户端的磁盘文件系统路径,在这种情况下是无用的。
你无法直接设置文件输入框的值。
唯一的方法是用户选择一个文件来设置文件输入框的值。
这么做是基于安全考虑。否则,你将能够创建一个自动上传客户端计算机特定文件的 JavaScript。
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();
}
XMLHttpRequest();
的答案有何不同? - HoldOffHunger虽然这并不是你问题的答案(因为其他人已经回答了),但如果你想要对上传文件字段进行一些编辑功能,你可能想做以下几点:
<input>
标签上传新文件。<input type="file" />
设置为现有的产品图像? 我可以在 <img />
标签中显示现有的图像,但提交时没有上传任何文件。 - Partho63你无法这样做。这是一种安全措施。想象一下,如果有人编写JS代码将文件输入的值设置为某些敏感数据文件,会发生什么?
就像这里其他人所说的那样:您不能仅使用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。这样可以省去用户打开文件输入元素来选择刚刚调整大小、修改等已缓存的图片的麻烦。但它应该适用于任何文件类型。
这个主题很古老,但我认为有人可能需要这个答案!
<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>
<form>
标签本身上没有触发onchange监听器吗? - Lazar Nikolicinput.dispatchEvent(new Event('change', { bubbles: true })
。 - Dogokuconst dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);//your file(s) reference(s)
document.getElementById('input_field').files = dataTransfer.files;
myFile =“MySubdir / Myfile.txt”
,是否可能将文件内容存储到变量中?上面的问题在https://stackoverflow.com/questions/73196322/pass-a-file-of-a-database-as-parameter-to-be-opened-with-a-html-viewer中更好地解释了。 - willy wonka在 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>
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