据我所知,<input type="file">
出于安全原因,大多数情况下不能由 javascript 操作,但如果我有一个 File 对象,这可能吗?
我在页面上有一个拖动区域,我可以从中获取一个文件对象。我不想使用 xhr.sendAsBinary,我宁愿从常规表单上传并将目标设置为框架。
我试过做类似的事情
var select = document.getElementById('upload_1');
select.files[0] = myFile;
myForm.submit();
有办法吗?
最佳答案
更新
看来你想拿File
来自 drop
的对象事件并将其分配给 <input>
元素。不幸的是,你不能那样做。只有用户可以选择文件;您不能动态更改将要上传的文件,因为浏览器出于安全原因拒绝 JavaScript 这种能力。
既然你说你有一个拖动区域,我假设你正在使用并定位一个支持拖放的浏览器。请注意,并非所有浏览器都支持拖放,因此我这里的示例仅限于此类浏览器。
通过拖放,您可以获得 File
对象脱离掉落事件,你不需要 input
元素。
// when you attach the 'drop' event listener
var dropzone = document.getElementById('drag_area'); // <-- ID of your drag area
attachEvent(dropzone, 'drop', function(event) {
var dt = event.dataTransfer;
var fileList = dt.files;
var file = fileList[0]; // you would have to change this if you allow multi-file upload
uploadFile(file);
});
function uploadFile(fileToUpload) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true); // <-- provide the proper URL
var form_data = new FormData();
form_data.append('file', fileToUpload);
xhr.send(form_data);
}
function attachEvent(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn);
}
}
请注意,这并非 100% 浏览器兼容。部分浏览器不支持通过XMLHttpRequest()
上传文件.如果你想支持这些浏览器,那么你必须做一些不同的事情。
最后,我的例子没有考虑使用表单。如果您想要基于表单的方法,请告诉我。我也可以帮助你:)
如果您有任何问题,请告诉我。
关于javascript - Html 文件输入,从 File 对象中设置选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8469479/