我理解< input type =“file”>由于安全原因,大多数情况下都无法通过
javascript进行操作,但是如果我有一个File对象可以吗？
我在页面上有一个拖动区域,我可以从中获取File对象.我不想使用xhr.sendAsBinary,我宁愿只是从目标设置为框架的常规表单上传.
我尝试过这样的事情
var select = document.getElementById('upload_1');
select.files[0] = myFile;
myForm.submit();
有没有办法做到这一点？
解决方法
UPDATE
您似乎想从drop事件中获取File对象并将其分配给< input>元件.不幸的是,你做不到.只有用户才能选择文件;您无法动态更改将上传的文件,因为出于安全原因,浏览器会拒绝JavaScript此功能.
既然你说你有一个拖动区域,我假设你正在使用并定位支持拖放的浏览器.请注意,并非所有浏览器都支持拖放,因此我的示例仅限于此类浏览器.
通过拖放,您可以从drop事件中获取File对象,而不需要输入元素.
// 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()上传文件.如果您想支持这些浏览器,那么您必须做一些不同的事情.
最后,我的示例不考虑使用表单.如果您想要基于表单的方法,请告诉我.我也可以帮助你:)
如果您有任何疑问,请告诉我.