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

Question

据我所知,<input type="file">出于安全原因,大多数情况都不能被javascript操纵,但是如果我有一个File对象,它是否可能？

我在页面上有一个拖动区域,我可以从中获取一个File对象.我不想使用xhr.sendAsBinary,我宁愿只是从目标设置为框架的常规表单上传.

我试过做类似的事情

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

有没有办法做到这一点？

Answer 1

UPDATE

看起来您想File从drop事件中获取对象并将其分配给<input>元素.不幸的是,你做不到.只有用户才能选择文件; 您无法动态更改将上传的文件,因为出于安全原因,浏览器会拒绝JavaScript此功能.

既然你说你有一个拖动区域,我假设你正在使用并定位支持拖放的浏览器.请注意,并非所有浏览器都支持拖放,因此我的示例仅限于此类浏览器.

通过拖放,您可以从Filedrop事件中获取对象,而不需要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().如果您想支持这些浏览器,那么您必须做一些不同的事情.

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

如果您有任何疑问,请告诉我.