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

据我了解，<input type="file">出于安全原因，大多数情况下不能由 javascript 操作，但是如果我有一个 File 对象，这可能吗？

我在页面上有一个拖动区域，我可以从中获取文件对象。我不想使用 xhr.sendAsBinary，我宁愿从常规表单上传，并将目标设置为框架。

我尝试过做类似的事情

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

有没有办法做到这一点？

UPDATE

看来你想采取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()。如果你想支持这些浏览器，那么你必须做一些不同的事情。

最后，我的示例没有考虑使用表单。如果您想要基于表单的方法，请告诉我。我也可以帮助你:)

如果您有任何疑问，请告诉我。