Html文件输入，从File对象中设置选择 [英] Html file input, set selection from File object

问题描述

据我所知，大多数情况下，< / code>由于安全原因，不能被JavaScript处理，但是如果我有一个File对象？

我在页面上有一个拖动区域，我可以得到一个File对象。我不想使用xhr.sendAsBinary，我宁愿只从目标设置为框架的常规形式上传。

我试过了就像

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

有没有办法做到这一点？

解决方案

更新

好像你想把 File 对象来自 drop 事件，并将其分配给< input> 元素。不幸的是，你不能这样做。只有用户可以选择文件;你不能动态地改变将被上传的文件，因为浏览器出于安全原因拒绝JavaScript这种能力。

---

说你有一个拖动区域，我假设你正在使用和定位一个支持拖放的浏览器。请注意，并非所有的浏览器都支持拖放功能，所以我的示例仅限于这些浏览器。

使用拖放功能，您可以获取文件对象脱离了drop事件，并且不需要输入元素。

  //当附加'drop'事件监听器时
 var dropzone = document.getElementById（'drag_area'）; //<  - 拖放区域的ID 
 attachEvent（dropzone，'drop'，function（event）{
 
 var dt = event.dataTransfer; 
 var fileList = dt.files; 
 var file = fileList [0]; //如果你允许多文件上传，你将不得不改变这个
 $ b $ uploadFile（file）; 
 
}）; 
 
函数uploadFile（fileToUpload）{
 
 var xhr = new XMLHttpRequest（）; 
 xhr.open（POST，url，true）; //<  - 提供正确的URL 
 
 var form_data = new FormData（）; 
 form_data.append（'file'，fileToUpload）; 
 xhr.send（form_data）; 
 
 
 $ b函数attachEvent（element，type，fn）{
 if（element.addEventListener）{
 element.addEventListener（type，fn，假）; 
} else if（element.attachEvent）{
 element.attachEvent（'on'+ type，fn）; 
 
 
 
 
 
 
 
请注意，这不是100％的浏览器兼容。某些浏览器不支持通过 XMLHttpRequest（）来上传文件。如果你想支持这些浏览器，那么你必须做一些不同的事情。  
 
 
最后，我的示例不考虑使用表单。如果你想要一个基于表单的方法，请让我知道。我也可以帮你：）
 
 
让我知道你是否有任何问题。
 
I understand that the <input type="file"> for the most part cannot be manipulated by javascript for security reasons, but is it possible if I have a File object?

I have a drag area on a page, that I can get a File object out of. I don't want to use the xhr.sendAsBinary, I'd rather just upload from a regular form with the target set as a frame.

I've tried doing something like
var select = document.getElementById('upload_1'); 
select.files[0] = myFile;
myForm.submit();
Is there a way to do this?
解决方案
UPDATE

It seems like you want to take the File object from the drop event and assign it to the <input> element. Unfortunately, you can't do that. Only the user can select files; you can't dynamically change the files which will be uploaded because browsers deny JavaScript this ability for security reasons.



Since you said you have a drag area, I'm assuming you are using and targeting a browser that supports drag and drop. Note that not all browsers support drag and drop so my example here is limited to such browsers.

With drag and drop, you can get the File object out of the drop event and you don't need an input element.
// 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);
    }
}
Note that this isn't 100% browser compatible. Some browsers don't support file uploading through XMLHttpRequest(). If you want to support those browsers, then you have to do something different. 

Finally, my example doesn't consider using forms. If you want a form-based approach, please let me know. I can help you with that as well :)

Let me know if you have any questions.

                        
这篇关于Html文件输入，从File对象中设置选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！