Html文件输入,从File对象设置选择

sh7euo9m  于 2023-06-20  发布在  其他
关注(0)|答案(2)|浏览(102)

我知道出于安全原因,<input type="file">在很大程度上不能被javascript操作,但是如果我有一个File对象,这是可能的吗?
我在页面上有一个拖动区域,我可以从中获取File对象。我不想使用xhr.sendAsBinary,我宁愿从一个普通的表单上传,目标设置为一个框架。
我试过做一些

var select = document.getElementById('upload_1'); 
select.files[0] = myFile;
myForm.submit();

有办法做到这一点吗?

brtdzjyr

brtdzjyr1#

更新

看起来您想从drop事件中获取File对象并将其分配给<input>元素。很不幸,你不能这么做。只有用户可以选择文件;你不能动态地改变将要上传的文件,因为浏览器出于安全原因拒绝JavaScript这种能力。
既然你说你有一个拖动区域,我假设你正在使用并瞄准一个支持拖放的浏览器。请注意,并不是所有的浏览器都支持拖放,所以我这里的示例仅限于这些浏览器。
通过拖放,您可以从drop事件中获取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()上传文件。如果你想支持这些浏览器,那么你必须做一些不同的事情。
最后,我的示例没有考虑使用表单。如果你想要一个基于表单的方法,请让我知道。我也可以帮你:)
如果你有任何问题请告诉我。

2ul0zpep

2ul0zpep2#

是的,这是可能的:
从blob加载文件:

let fileInputElement = document.getElementById('file_input');
  let container = new DataTransfer();
  // Here load or generate data
    let data = new Blob();
    let file = new File([data], "g"+i+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
    container.items.add(file);
  fileInputElement.files = container.files;

要从其他文件输入加载文件,请执行以下操作:

let input1 = document.getElementById('file_input');
  let input2 = document.getElementById('some_other_input')
  let container = new DataTransfer();
   [...input2.files].map(file=>container.items.add(file));
  input1.files = container.files;

https://jsfiddle.net/Kartearis/gmhwnaz6/3/

相关问题