Установленное значение входного файла с JavaScript

Question

Я использую этот скрипт (из http://www.html5rocks.com/en/tutorials/file/dndfiles/):

function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
    } 
} 

перебрать файлы тащили с рабочего стола в HTML элемент.

Из этого учебника я могу читать файлы и делать что-то с содержанием.

Я хочу что-то более простое.

Я хочу простую форму:

<form method="post" enctype="multipart/form-data"> 
<input type="file" name="my_file" /> 
<input type="submit" /> 
</form> 

и JavaScript установите значение input[name="my_file"].

Я могу прочитать с некоторых страниц, что я не могу установить значение ввода файла по соображениям безопасности. Я понимаю, что я не могу установить произвольное значение ввода файла, но я не понимаю, почему я не могу установить значение входного файла как имя файла файла drag'n'dropped.

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

Есть ли способы выполнить то, что я хочу?

Answer 1

Вы не можете установить атрибут value элемента из соображений безопасности. Но вы можете взломать это так.

Сделать элемент ввода файла в форме, скрытой с помощью CSS. Имейте элемент div в форме и сделайте его похожим на поле ввода с CSS. Прикрепите обработчик кликов к этому элементу div, который инициирует открытие элемента ввода файла, и когда пользователь выполнит выбор файла, вы можете прочитать его значение и обновить элемент div, используя событие onChange ввода файла.

<form method="post" enctype="multipart/form-data"> 

    <input type="file" id="my_file" /> 

    <div id="file_selector">Select a file</div> 

    <input type="submit" 

</form> 

#my_file { 
    visibility: hidden; 
    position: absolute; 
    left: -9999px; 
    top: -9999px 
} 

#file_selector { 
    display: inline-block; 
    width: 200px; 
    padding: 5px; 
    background: #FFF; 
    border: solid 1px #CCC; 
    color: #666; 
} 

$(function() { 

    $('#file_selector').on('click', function(e) { 
    $('#my_file').trigger('click'); 
    }); 

    $('#my_file').on('change', function() { 
    $('#file_selector').html($(this).val()); 
    }); 

}); 

Попробуйте здесь http://codepen.io/faisalchishti/pen/emmxWr