Можно ли удалить тип ввода = выбор файла с помощью JavaScript?

Question

Если у вас есть HTML-форму с элементом, как это:

<input type="file" name="file" multiple="multiple"> 

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

Я понимаю, что из-за соображений безопасности браузеры не позволяют JavaScript просто устанавливать любое значение для выбранных файлов, и это хорошо.

Мне просто интересно, хотя, как только пользователь выбрал файлы, я хотел бы, чтобы несколько форм выполняли загрузки отдельно. Есть ли способ либо:

• Clone входной элемент в каждой новой форме, и удалить программно выбора файлов из каждого элемента?
• Перенести некоторые из своих выборов в отдельный тип ввода = элемент файла или даже другую форму на на экране?

Answer 1

Если вы клонируете элемент input[type=file], значение клона пуст. Вы также не можете копировать значение из одного файла в другой.

Я никогда не пробовал переместить файл с одного документа на другой после выбора файла. Я хотел бы думать, что браузер очистит выбор, когда вы это сделаете, но это может быть и так. (Update:.. Тестируемый три браузера, все они сохранил значения, к моему удивлению, смотрите ниже)

Фундаментально, если вы хотите использовать отдельные формы для загрузки файлов по отдельности, вы хотите входы в отдельных формах для начала, до пользователь делает свой выбор. Но, видимо, вы можете их перемещать, что позволит вам делать то, что вы хотите сделать. Я все же, вероятно, начну с отдельных форм, чтобы избежать их перемещения.

---

Интересно, что Chrome, Firefox, и IE10, по крайней мере, кажется, совершенно счастлив двигаться файл элемента с его выбора нетронутым, даже в другой документ: Live Example | Source

HTML:

<input id="theFile" type="file"> 
<br>Choose a file above, then either: 
<br><input type="button" id="btnClone" value="Clone"> 
<input type="button" id="btnMove" value="Move to iframe"> 
<br> 
<iframe id="theFrame" style="width: 99%"></iframe> 

JavaScript:

(function() { 
    gid("btnClone").onclick = function() { 
    display("Here's the clone:"); 
    document.body.appendChild(gid("theFile").cloneNode(true)); 
    }; 
    gid("btnMove").onclick = function() { 
    gid("theFrame").contentDocument.body.appendChild(gid("theFile")); 
    display("File input moved to the iframe"); 
    }; 

    function gid(id) { 
    return document.getElementById(id); 
    } 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
})(); 

С выше, если я выбираю что-то и нажмите Переместить в IFrame кнопки ввода перемещается, по-видимому, без изменений. (Cloning очищает значение, как ожидалось.)