如何设置一个值的文件输入HTML?

如何设置它的值?

<input type="file" />
864073 次浏览
小开
最佳答案

出于安全考虑，不能将其设置为客户端磁盘文件系统路径。

想象一下:

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

你不希望你访问的网站能够做到这一点，对吗?=)

您只能将其设置为这个答案中所见的公共可访问的web资源，但这显然与客户端磁盘文件系统路径不同，因此在该上下文中它是无用的。

小开

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

小开

你不能。

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

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

小开

这不是回答你的问题(其他人已经回答了)，但如果你想有一些上传文件字段的编辑功能，你可能想做的是:

  • 显示这个字段的当前值，只需打印文件名或URL，一个可点击的下载链接，或者如果它是一个图像:只显示它，可能是缩略图
  • <input>标记来上传一个新文件
  • 选中该复选框时，删除当前上传的文件。注意，没有办法上传一个“空”文件，所以你需要这样做来清除字段的值
小开

实际上我们可以做到。 我们可以使用c#中的webbrowser控件使用FormToMultipartPostData库来设置文件的默认值。我们必须下载这个库并将其包含在我们的项目中。Web浏览器使用户能够在表单内浏览网页。 一旦网页加载，webBrowser1_DocumentCompleted中的脚本将被执行。 < / p > 

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

正如这里的其他人所说:你不能用JavaScript自动上传任何文件都可以。

然而!如果你可以访问你想要在代码中发送的信息(即，不是C:\passwords.txt)，那么你可以将其作为__abc2类型上传，然后将其作为文件处理。

服务器最终看到的内容将与某人实际设置<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元素的麻烦，只能选择他们刚刚调整大小，修改等的本地缓存图像。但它应该适用于任何文件类型。

小开

我已经写完整的例子加载URL输入文件，和预览 enter image description here 你可以在这里查看 1 https://vulieumang.github.io/vuhocjs/file2input-input2file/ < / p >

简而言之，你可以使用这个函数

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();
}
小开

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

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

这个话题非常古老，但我认为有人需要这个答案!

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

提交答案