Ввод HTML-файла, выбор набора из объекта File - PullRequest
Новая
       5

Ввод HTML-файла, выбор набора из объекта File

7 голосов
/ 12 декабря 2011

Я понимаю, что по большей части <input type="file"> не может манипулировать javascript по соображениям безопасности, но возможно ли это, если у меня есть объект File?

У меня есть область перетаскивания на странице, из которой я могу получить объект File. Я не хочу использовать xhr.sendAsBinary, я бы предпочел просто загрузить из обычной формы с целью в качестве фрейма.

Я пытался сделать что-то вроде 

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

Есть ли способ сделать это?

1 Ответ

7 голосов
/ 12 декабря 2011

ОБНОВЛЕНИЕ

Похоже, вы хотите взять объект File из события drop и назначить его элементу <input>.К сожалению, вы не можете этого сделать.Только пользователь может выбирать файлы;вы не можете динамически изменять файлы, которые будут загружены, потому что браузеры запрещают JavaScript этой возможности по соображениям безопасности.

Поскольку вы сказали, что у вас есть область перетаскивания, я предполагаю, что вы используете и нацеливаетесь набраузер, который поддерживает перетаскивание.Обратите внимание, что не все браузеры поддерживают перетаскивание, поэтому мой пример здесь ограничен такими браузерами.

С помощью перетаскивания вы можете получить объект File из события перетаскивания, и вам не нужно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);
    }
}

Обратите внимание, что это не на 100% совместимо с браузером.Некоторые браузеры не поддерживают загрузку файлов через XMLHttpRequest().Если вы хотите поддерживать эти браузеры, вам нужно сделать что-то другое.

Наконец, мой пример не рассматривает использование форм.Если вам нужен подход на основе форм, пожалуйста, дайте мне знать.Я могу помочь вам и в этом:)

Дайте мне знать, если у вас есть какие-либо вопросы.

...